Css 如何在简单的下拉菜单代码中去掉之后的神秘额外空间？

我有一个简单的CSS下拉菜单，出于某种原因，浏览器MacChrome+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>

和jsfiddle：

注意选项二之后，分隔符之前的额外空间。多余的空间是从哪里来的，我怎样才能去掉它呢？

试试这个

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

试试这个

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

试试这个：

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

我用叉子叉了你的腰：

编辑：

原因: 对于代码中每个不间断的空格字符串/新行，一个空格将显示在呈现的HTML中。由于该特定li中有嵌套元素，因此渲染了更多的空间。

请尝试以下操作：

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

我用叉子叉了你的腰：

编辑：

原因:

---

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

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

虽然读起来没那么好看，但它还是很管用的

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

---

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

虽然读起来没那么好看，但它还是很管用的

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

---

这修复了它：选项TwoSub-One但是为什么？？？这修复了它：选项TwoSub-One但是为什么？？？为什么浏览器要注意格式化的空白？这是非常重要的一部分-超级怪异和蹩脚-我的菜单结构是由Wordpress生成的，所以我必须修改WP的内部结构，以手动删除它插入到输出中的选项卡和换行符。那没什么大不了的。。。直到我更新到Wordpress的下一个版本。。。它通过返回到额外的空间迅速打破了我的布局：无论如何，谢谢你的回答。我听到了，虽然从技术上讲，这确实是一个浏览器问题。说真的，我认为解释空白终于成为过去了。好消息是，Wordpress似乎有一个我可以点击的钩子，让我有机会在输出之前手动过滤掉菜单代码中的空白，所以我不必调整WP核心代码。为什么浏览器在格式化时会注意空白？这是非常重要的一部分-超级怪异和蹩脚-我的菜单结构是由Wordpress生成的，所以我必须修改WP的内部结构，以手动删除它插入到输出中的选项卡和换行符。那没什么大不了的。。。直到我更新到Wordpress的下一个版本。。。它通过返回到额外的空间迅速打破了我的布局：无论如何，谢谢你的回答。我听到了，虽然从技术上讲，这确实是一个浏览器问题。说真的，我认为解释空白终于成为过去了。好消息是，Wordpress似乎有一个钩子，我可以点击它，让我有机会在输出之前手动过滤掉菜单代码中的空白，这样我就不必调整WP核心代码了。@JoshC完全正确……速度稍微快了一点。@JoshC完全正确……速度稍微快一点。