0

zurb ファンデーションを使用して Web サイトを作成しました。私の問題はこれです。ブラウザーのサイズを大きくすると、ナビゲーション メニューがカテゴリから "Menu" という単語に変わると、それをクリックして、移動するカテゴリを選択できます。ただし、4 つ以上のオプションがあるカテゴリを選択すると、4 番目以降のすべてのオプションが切り捨てられているように見えます。これと他のいくつかのことを補うために特定の要素の z-index を変更しようとしましたが、これを解決できませんでした。ここで同様の問題を探しましたが、同じ問題を見つけることができませんでした。誰でも助けになれますか？

4

2 に答える 2

1

私も同様の問題に遭遇しました。それは奇妙です。ダンが提案した追加のアイテムを追加するという回避策を試みましたが、スペースが大きすぎて（カットオフではありましたが）、私の好みには合いませんでした。私の場合、それは<ul>リンク付きのリストでした。私にとってうまくいくように見えるのは、最後の要素の下マージンを次のように設定することです:

<ul class='dropdown'>
   <li><a href='#link'>Item 1</a></li>
   <li><a href='#link'>Item 2</a></li>
   ...
   <li><a href='#link' style='margin-bottom:1em;'>Item n</a></li>
</ul>

別の方法として、マークアップをクリーンに保ち、スタイルを維持するには、CSS を使用できます。

.problem-dropdown li:last-child
{
    margin-bottom: 1em;
}

そして、problem-dropdown問題を与えるドロップダウンにクラスを追加します。

時間があれば、nav.top-bar.expanded要素の高さを設定するコードが問題の原因です。margin-bottomを上記のように設定すると、メニューに適切な高さを設定できます。私の場合、手動で増やすことで問題が解決するので、イベントの JS リスナーを作成してから修正できると思います。ただし、最初にそれを行うコードを修正することを検討することもできます。

于 2015-05-06T00:11:35.783 に答える