Question

我有一个简单的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/

注意分隔符之前“选项二”之后的额外空格。那个额外的空间来自哪里，我怎么能摆脱它呢？

Answer 1

试试这个..

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

Demo

Answer 2

试试这个：

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

我分叉你的jsFiddle：http://jsfiddle.net/5V7RC/

编辑：

原因：对于代码中每个不间断的空格/换行符号，空格将显示在渲染的HTML中。因为在特定的li中嵌套了元素，所以渲染了更多的空格。

Answer 3

它出现是因为你在li上添加了额外的空格。删除所有空格/咒语以消除额外空间。

虽然阅读起来不太好，但确实有效。

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

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

如何在简单的下拉菜单代码<li>之后摆脱神秘的额外空间？</li>

3 个答案: