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/

请注意分隔线前“选项二”之后的额外空格。额外的空间是从哪里来的，我该如何摆脱它？

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 回答