0

重要なのは、このメニューに1行を折り返すことです。代わりに、「2行」を取得していますが、なぜ彼が行を削除しているのかわかりません。

誰かが私にこれがどのように起こっているのかについて簡単に見てください。

HTML

<div id="main-menu">
<ul>
    <li><a href="">item 1</a></li>
    <li><a href="">item 2</a></li>
    <li><a href="">item 3</a></li>
</ul>
</div>

CSS

#main-menu {
    clear: right;
    overflow: hidden;
    margin-top: 75px;
    float:right;
}

#main-menu ul {
    overflow: hidden;
    text-align: right;
    border-radius: 5px;
    background-color: #333;
}

#main-menu ul li {
    display:inline-block;
    padding: 2px 2%;
}

#main-menu ul li a {
    color: #fff;
    font-size: .9em;
}

#main-menu ul li:hover {
    background-color: #EFAB00;
}

#main-menu ul li a:hover {
    text-decoration: none;
}

ここに例があります：

http://jsfiddle.net/XRm6Q/2/

4

4 に答える 4

2

これは、によって引き起こされるのfloatではなく、sに適用しているパディングが原因ですli（パーセンテージがpaddingsの場合、親はサイズに合わせてサイズ変更されないため）。に変更するpadding: 2px 2%;とpadding: 2px;、ラッピングはなくなります：小さなリンク。

お役に立てば幸いです。

于 2012-08-28T10:14:15.810 に答える
1

これは、親要素（ul）がlisを収容するのに十分な幅ではないためです。

ULを広くすると、機能します。

http://jsfiddle.net/Kyle_Sevenoaks/XRm6Q/8/

width: 100%;ULではなく親DIVに追加します。申し訳ありません：D

http://jsfiddle.net/Kyle_Sevenoaks/XRm6Q/16/

于 2012-08-28T10:11:46.713 に答える
1

http://jsfiddle.net/XRm6Q/10/を参照してください

私は要素と要素に使用white-space: nowrap;しました。このように、親の幅を調整する必要はありません（次に、要素の余分なパディングを削除/調整するか、代わりにマージンを使用します）ulwhite space: normallili

そうすることで、すべてのアイテムが同じ行に残ります

于 2012-08-28T10:12:13.297 に答える
1

メニューにを設定するかwidth、メニューtable-row displayとtable-cellアイテムに使用します。後者の場合、おそらくwhite-space: nowrapアイテムにも何が含まれるかわかりますが、幅がわからない場合は利点があります。

于 2012-08-28T10:12:54.327 に答える