1

私のウェブサイトはRTLウェブサイトです。rtl 方向でカスタマイズされた 3.2.5をダウンロードしました。ただし、スティッキー固定トップバーを使用した Web サイトのナビゲーションは、スクリーン ショットに示すように、ナビゲーション リンクを逆の順序でレンダリングします。 ここに画像の説明を入力

順序は、次のスクリーン ショットのようにする必要があります。 ここに画像の説明を入力

必要な 2 番目のスクリーン ショットを取得するために、app.css で次のように設定しようとしました。

.top-bar ul>li {
float: right;
}

ここでの問題は、トグル トップバーの矢印がメニューを展開する前にのみレンダリングされる小さい画面のトグル トップバーで発生し、その後、最初の項目の下に消えます。次のスクリーン ショットを見てください。

ここに画像の説明を入力

上記のスクリーン ショットは、上記の CSS を使用してナビゲーション アイテムが大きな画面で正しく並べられている場合の、小さな画面のナビゲーション バーを示しています。トグル矢印が表示されません！

次のスクリーン ショットは、正しいトグル バーを示していますが、大きな画面では順序が正しくありません。 ここに画像の説明を入力

以下は、このナビゲーションを生成するために使用される HTML コードです。

           <div class="contain-to-grid fixed">
<nav class="top-bar">
<ul>   
  <li class="name"><h1><a href="#"></a></h1></li>
   <li class="toggle-topbar"><a href="#"></a></li>  
</ul>
  <section>
    <ul class="left">    
  <li class = "active"><a href="/quran/" class="selected"><img src="/quran/img/home.png" alt="" />الرئيسية</a></li>
  <li class = ""><a href="/quran/contacts" class=""><img src="/quran/img/contact.png" alt="" />اتصل بنا</a></li>
  <li class = ""><a href="/quran/pages/about" class=""><img src="/quran/img/about.png" alt="" />عن الموقع</a></li>
    </ul>
    <ul class="right">
  <li class="">  
<div class="row collapse">
  <form controller="qurans" class="" id="QuranSearchForm" method="get" action="/quran/search">  <div class="nine mobile-three columns">
              <input name="q" type="text" id="QuranQ" title="بحث!" class="inline" placeholder="كلمات البحث..." value="" />  </div>
  <div class="three mobile-one columns">
                <a href="#" id="searchbutton" class="button expand postfix" title="بحث!" >بحث!</a>
</div>
  </form>
</div>              
  </li>
</ul>
  </section>
</nav>
 </div>

この問題で最も奇妙な動作：アイテムに関連するfoundation.min.cssプロパティリストでGoogle chromeのinspect要素から.top-bar ul>li floatプロパティを変更しようとし、floatを正しいものに変更すると、両側で正常に動作します（大画面では順序が正しくなり、小画面ではメニューを拡大および縮小するためのトグル矢印が表示されます）!!!

ライブ デモはこのリンクにありますが、ライフ デモの左側に検索ボックスがあることに注意してください。つまり、スクリーンショットが好きではありません。

4

1 に答える 1

1

最後に、@media クエリに依存する解決策を得ました。app.cssで次のことを行いました。

.top-bar ul>li{
  float:right;  
}
@media only screen and (max-width: 940px) { .top-bar ul>li{
  float:none;  
}

}

上記のソリューションでは、 @media を使用して、小さな画面の場合に float:right をキャンセルしました。このリンクからライブ デモを表示します。

于 2013-04-03T15:02:06.533 に答える