1

シンプルな CSS ドロップダウン メニューがあり、何らかの理由で、ブラウザー (Mac Chrome + Firefox) が (非表示の) サブメニューがあるメニュー オプションの後に余分なスペースを追加しています。

コードは次のとおりです。

<ul>
    <li>Option Zero</li>
    <li>Option One Is Longer</li>
    <li class='current'>Option Two
        <ul class='sub-menu'>
            <li>Sub One</li>
        </ul>
    </li>
    <li>Option Three Is Not the Best</li>
</ul>

およびマークアップ:

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing:    border-box;
    box-sizing:         border-box;
}

body {background:#ccc;font-size:18px;font-family:Arial,sans-serif;font-weight:bold;}

ul {list-style:none;width:100%;background:green;height:50px;
    padding:10px 10px 0 10px;margin:0px;}
li {float:left;margin-top:10px;}
li:after {content:"|";margin:0 8px;}
.sub-menu {display:none;}

および jsfiddle: http://jsfiddle.net/pnoeric/hjVWQ/2/

「オプション 2」の後、仕切りの前に余分なスペースがあることに注意してください。その余分なスペースはどこから来て、どうすればそれを取り除くことができますか?

4

3 に答える 3

3

代わりにこれを試してください..

<ul>
    <li>Option Zero</li>
    <li>Option One Is Longer</li>
    <li class='current'>Option Two<ul class='sub-menu'><li>Sub One</li></ul></li>
    <li>Option Three Is Not the Best</li>
</ul>

デモ

于 2013-08-28T02:04:11.940 に答える
3

これを試して：

<li class='current'>Option Two<ul class='sub-menu'><li>Sub One</li></ul></li>

あなたの jsFiddle をフォークしました: http://jsfiddle.net/5V7RC/

編集：

理由: コード内の中断されないスペース/改行の文字列ごとに、レンダリングされた HTML にスペースが表示されます。その特定の li にネストされた要素があったため、より多くのスペースがレンダリングされました。

于 2013-08-28T02:04:16.197 に答える
2

そのliに追加している余分な空白のために表示されています。すべてのスペース/インデントを削除して、余​​分なスペースを取り除きます。

読むのはそれほど良くありませんが、機能します。

<li class='current'>Option Two<ul class='sub-menu'><li>Sub One</li></ul></li>

http://jsfiddle.net/hjVWQ/4/

于 2013-08-28T02:04:40.730 に答える