html - 显示为 :none; on itself and all children, 的 <ul><li> 列表仍然向父级 <li> 添加 3px 填充

Question

所以，我在另一个 li 中有一个标准的嵌套 ul li 列表，例如:

<li><a href="#">Link</a>
    <ul>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>
</li>

ul 及其所有子级都有 display:block; 但父级 li 的右侧仍有 3px 的填充.

这个问题很简单，你自己看一下: link

看第三个链接

但是，当从上面的 HTML 中最上面的 anchor 标记和最下面的结束 li 标记之间的所有空格都被删除时，这个问题就会消失。

这似乎发生在 Chrome 和 Firefox 中，我没有进一步测试，而是想在这里问问这是否是我缺乏的一些常识，或者这是一个适当的错误。

Answer 1

因为你有一个 display: inline;在你的 li是 <a> 之后的空格/换行符第三个元素li显示为单个空格。

如果你float li s 并保留默认值 display: block;没有这种效果，你会得到相同的水平列表。