创建导航 - 内联块或浮动？

Question

当我尝试使用内联块创建导航时,我会在每个列表项的右侧获得4px.

当我通过浮动每个列表项来做它,它工作正常.

有没有理由第一个选择是应用4px？我已经将一切设置为0px的边距和0px的填充,我不明白.即使Firebug报告它有0,但差距仍然存在.

谢谢

Answer 1

是的,空间是设计的,应该是

这有什么理由吗？是的.添加的内容实际上是一个单词空间.就像你有两行文字一样.浏览器在不同行中的文本之间放置一个空格,因此最后一个单词不会触及下一行的第一个单词:

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

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

这是我的文本,在我的HTML源代码中有两行.

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

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

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

1. 将所有元素放在一行中:

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

   这个实际上将所有元素放在一行中,这可能使人们更难操纵这些元素.如果每个LI人都有一个锚标签(带有长链接),这条线太长而无法处理.

2. 注释掉线:

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

3. 让标签突破界限:

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

   这一点对于眼睛来说是最不突兀的,但是对于初学者来说可能看起来很混乱,因此其他团队成员(如果你在这样的环境中工作)可能会感觉很想将标签结束回到他们原来的位置(通常是这样).他们可能会觉得这些因错误而被打破.

在这个JSFiddle示例中可以看到所有这三个的结果.

选择最适合你的.我通常使用评论,因为它在我的开发编辑器中最不会分散注意力,因为评论非常微妙.