html - 创建导航 - 内联 block 还是 float ？

Question

当我尝试使用 inline-block 创建导航时，每个列表项的右侧都有 4px。

当我通过 float 每个列表项来做到这一点时，它工作得很好。

第一个选项应用 4px 是否有原因？我已将所有内容设置为 0px 的边距和 0px 的填充，我不明白。即使 Firebug 也将其报告为 0，但差距仍然存在。

谢谢

Answer 1

是的，空间是设计使然，应该是

这有什么原因吗？是的。添加的实际上是一个词空间。就像您有两行文本一样。浏览器在单独的行中的文本之间放置一个空格，这样最后一个单词就不会碰到下一行的第一个单词:

<p>
  This is my text that's in two lines
  inside my HTML source.
</p>

行和内部之间通常会有一个单词空间，因此文本可以在浏览器中正确显示:

This is my text that's in two lines inside my HTML source.

您的情况也会发生同样的情况，因为您的元素是内联的。您的导航元素在 HTML 源代码中每行列出一个，因此它们之间会添加一个分词符。

如何避免元素之间的空格过多？

基本上有 3 种方法可以缓解这个问题。所有这些工作的前提是将所有元素放在 HTML 渲染器所看到的同一行中:

1. 将所有不带空格的元素放在一行中:

   <ul>
       <li>First</li><li>Second</li>...<li>Last</li>
   </ul>
   

   这实际上将所有元素放在一行中，这可能会使人们更难操纵这些元素。如果每个LI内部都有一个 anchor 标记(带有长链接)，那么这一行就太长而无法处理。

2. 注释掉换行符:

   <ul><!--
       --><li>First</li><!--
       --><li>Second</li><!--
       ...
       --><li>Last</li><!--
   --></ul>
   

3. 让标签打破界限:

   <ul
      ><li>First</li
      ><li>Second</li
       ...
      ><li>Last</li
   ></ul>
   

   这个最不引人注目，但可能会让初学者感到困惑，因此其他团队成员(如果您在这样的环境中工作)可能会想将标签末端放回原来的位置(通常是)。他们可能觉得这些被错误破坏了。

这三个结果都可以在 this JSFiddle example 中看到。 .

选择最适合您的一个。我通常使用注释，因为它在我的开发编辑器中最不会分散注意力，因为注释非常微妙。