1

ここに、完全に機能しているjqueryメニューがあります。しかし、私はそれに400pxの固定幅を与えたので、メインulに特定の数を超えるリンクを追加すると、それらは次の行に流れることになり、それは絶対に望ましくありません。

私は問題を克服しようoverflow:hiddenとline-heightしましたが、とにかく結果はありません。

メニューは次のとおりです：http：//jsfiddle.net/b5Wdc/

ご覧のとおり、次の行に赤い色のリンクが流れており、それが問題です。

この状況でオーバーフローしたリンクを非表示にするには、何を書く必要がありますか？

とにかくありがとうございました。

4

3 に答える 3

1

スタイルを次のように変更すると、うまくいくと思います：

.HeadMenu .HeadMenuMain
{
    display:block;
    position:relative;
    margin:0;
    width:400px;
    padding:0;
    direction:rtl;
    height:40px;
    white-space:nowrap; //will make elements stay on one row
}

.HeadMenu .HeadMenuMain li
{
    display:inline-block; //will make elements stay on one row with the nowrap
    list-style:none;
    position:relative;
}

http://jsfiddle.net/b5Wdc/2

于 2013-03-15T09:22:48.317 に答える
1

質問に対するコメントでの会話から、メニューは完全に固定されており、「余分な」アイテムは常に非表示にする必要があり、動的な表示やラッピングは必要ないようです。99pxしたがって、CSS を使用して、収まらないことがわかっているすべてのメニュー項目を非表示にすることができ400pxます。この純粋な CSS は、残りを非表示にします。

.HeadMenu #nav > li:nth-child(n+5) {
    display:none;
}

nth-childただし、 CSS セレクターのサポートには IE8 以上が必要です。

質問でjQueryについて言及したので、IE8をサポートする必要がある場合は、JavaScriptで同じことを達成できます：

$('.HeadMenu #nav > li:nth-child(n+5)').hide()

または、CSS ソリューションを維持し (よりクリーンなため)、selectivizrnth-childを使用してセレクターのサポートを IE8にもたらします。

于 2013-03-15T11:27:16.157 に答える
0

ナビゲーション メニューに overflow:hidden を追加すると、うまくいきます。

.HeadMenu #nav {
overflow: hidden;
}
于 2013-03-15T09:20:10.083 に答える