如何在简单的下拉菜单代码中摆脱 <li> 之后的神秘额外空格？ [复制]

Posted 2023-03-06

【中文标题】如何在简单的下拉菜单代码中摆脱 <li> 之后的神秘额外空格？ [复制]

【英文标题】：How can I get rid of mysterious extra space after <li> in simple drop-down menu code? [duplicate]

【发布时间】：2013-08-30 22:57:17

【问题描述】：

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

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

【问题讨论】：

这解决了它：<li class='current'>Option Two<ul class='sub-menu'><li>Sub One</li></ul></li> 但是为什么？？？

【参考方案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

【讨论】：

为什么浏览器要注意空格来格式化？这是非常 IE6 的... ;-)

超级怪异和蹩脚——我的菜单结构是由 Wordpress 生成的，所以我不得不修改 WP 内部以手动删除它插入到输出中的选项卡和换行符。这没什么大不了的……直到我更新到下一个版本的 Wordpress……它通过恢复到额外的空间来迅速破坏我的布局。 :-( 无论如何，谢谢你的回答。

我听到了，虽然从技术上讲，这确实是一个浏览器问题。 （说真的，我认为解释空格终于成为过去了。）好消息是，看起来 Wordpress 有一个我可以利用的钩子，让我有机会在之前手动过滤掉菜单代码中的空格它是输出，所以我不必调整 WP 核心代码。

【参考方案2】：

试试这个：

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

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

编辑：

原因： 对于代码中每个不间断的空格/新行字符串，一个空格将显示在您呈现的 html 中。因为你在那个特定的 li 中有嵌套元素，所以渲染了更多的空间。

【讨论】：

@JoshC 完全正确......而且速度稍快。

【参考方案3】：

它的出现是因为您在该 li 上添加了额外的空格。删除所有空格/缩进以消除多余的空间。

虽然它读起来不那么好听，但它确实有效。

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

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