0

アプリに固定ナビゲーション バーを実装しようとしていますが、ナビゲーション バーが表示されないという問題があります。折りたたまれているように見えます。参照用に次の画像を参照してください。

ここに画像の説明を入力

次のようになります。

ここに画像の説明を入力

私が使用している関連コードは次のとおりです。

<div data-role="header" data-id="header" data-position="fixed">
            <div data-role="navbar">
                <ul>
                    <li><a href="index.html" data-role="button" data-icon="b" data-inline="true" data-iconpos="notext" class="ui-btn-right"></a></li>
                    <li><a href="index.html" data-role="button" data-icon="star" data-inline="true" data-iconpos="notext" class="ui-btn-right"></a></li>
                    <li><a href="index.html" data-role="button" data-icon="grid" data-inline="true" data-iconpos="notext" class="ui-btn-right"></a></li>
                    <li><a href="index.html" data-role="button" data-icon="search" data-inline="true" data-iconpos="notext" class="ui-btn-right"></a></li>
                </ul>
            </div><!-- /navbar -->
</div><!-- /header -->

ヘッダー ブロックの外側にナビゲーション バーを実装することで、2 番目の画像を正常に表示できますが、固定位置に設定することはできません。デフォルトのテーマからいくつかの色の微調整を差し引いたものを使用しているため、CSS に問題はないと確信しています。助言がありますか？

- アップデート -

ここで要求されているのは、 jsfiddleでの迅速で汚い実装です。

4

2 に答える 2

2

取り外しdata-role="button"てclass="ui-btn-right"、適切なナビゲーションバーを作成しました。ナビゲーションバー内のリンクは、ボタンとして自動的にスタイル設定され、等間隔に配置されます。必要かどうかdata-inline="true"はわかりませんが、そのままにしておきました。使用しているナビゲーションバーでは使用していません。

<div data-role="header" data-id="header" data-position="fixed">
            <div data-role="navbar">
                <ul>
                    <li><a href="index.html"  data-icon="b" data-inline="true" data-iconpos="notext"></a></li>
                    <li><a href="index.html"  data-icon="star" data-inline="true" data-iconpos="notext"></a></li>
                    <li><a href="index.html" data-icon="grid" data-inline="true" data-iconpos="notext"></a></li>
                    <li><a href="index.html" data-icon="search" data-inline="true" data-iconpos="notext"></a></li>
                </ul>
            </div><!-- /navbar -->
</div><!-- /header -->​
于 2012-08-14T01:03:34.427 に答える
1 
<div data-role="header">        
    <div data-role="navbar" data-iconpos="bottom">
        <ul>
            <li ><a  data-icon="search" href="#" href="a.html" >One</a></li>
            <li><a  data-icon="search" href="#" href="a.html" >Two</a></li>
            <li><a  data-icon="search" href="#" href="a.html" >Three</a></li>
        </ul>
    </div><!-- /navbar -->
</div><!-- /footer -->​

このコードはかなりうまく機能します。http://jsfiddle.net/K6GMG/4/ ボタンは既にボタンであるため、タグにボタンを使用することはありません。

しかし、これを追加するclass="ui-btn-right"とコードが壊れてしまいます。

于 2012-08-14T00:39:41.050 に答える