管理内联列表项之间的空白的最佳方法

Question

我的HTML如下:

<ul id="nav">
    <li><a href="./">Home</a></li>
    <li><a href="/About">About</a></li>
    <li><a href="/Contact">Contact</a></li>
</ul>

而我的css:

#nav {
    display: inline;
}

然而,li之间的空白显示出来.我可以通过折叠它们来删除空格,如下所示:

<ul id="nav">
    <li><a href="./">Home</a></li><li><a href="/About">About</a></li><li><a href="/Contact">Contact</a></li>
</ul>

但这主要是通过手工维护,我想知道是否有更清洁的方法.

Answer 1

这里有几个选项,首先我会在创建内联列表时给你正常的练习:

<ul id="navigation">
  <li><a href="#" title="">Home</a></li>
  <li><a href="#" title="">Home</a></li>
  <li><a href="#" title="">Home</a></li>
</ul>

然后CSS使其按预期运行:

#navigation li 
  {
    display: inline;
    list-style: none;
  }
#navigation li a, #navigation li a:link, #navigation li a:visited
  {
    display: block;
    padding: 2px 5px 2px 5px;
    float: left;
    margin: 0 5px 0 0;
  }

显然我省略了悬停和活动集,但是这创建了一个很好的块级导航,并且这是一种非常常见的方法,可以在保持标准的同时执行此操作./*记得根据自己的喜好进行调整,为背景添加颜色,等等*/

如果你想保留它只是文本和内联,我相信你不想添加块元素:

   margin: 0 5px 0 0; /* that's, top 0, right 5px, bottom 0, left 0 */

意识到你想要移除空白,只需相应地调整边距/填充.

Answer 2

消除空格的另一种有用方法是将列表的font-size属性设置为0,并将列表元素设置为所需的大小.

Answer 3

你真正想要的是CSS3 白色空间崩溃:丢弃.但我不确定是否有任何浏览器实际支持该属性.

一些替代解决方案是让标签的尾部消耗空白.例如:

<ul id="nav"
    ><li><a href="./">Home</a></li
    ><li><a href="/About">About</a></li
    ><li><a href="/Contact">Contact</a></li
></ul>

我见过的另一件事是使用HTML注释来消耗空格

<ul id="nav"><!--
    --><li><a href="./">Home</a></li><!--
    --><li><a href="/About">About</a></li><!--
    --><li><a href="/Contact">Contact</a></li><!--
--></ul>

如果您可以使用浮点数,请参阅thismat的解决方案,并根据您可能需要添加<li>设置的尾随的要求clear: both;.

但CSS3属性可能是最好的理论方法.

Answer 4

列表项的更好解决方案是使用:

#nav li{float:left; width:auto;}

没有头痛的视觉效果完全相同.

Answer 5

采用非基于XML的HTML并省略</li>.

<ul id="nav">
    <li><a href="./">Home</a>
    <li><a href="/About">About</a>
    <li><a href="/Contact">Contact</a>
</ul>

然后将项的显示属性设置为内联块而不是内联.

#nav li {
    display: inline-block;
    /display: inline; /* for IE 6 and IE 7 */
    /zoom: 1; /* for IE 6 and IE 7 */
}

Answer 6

问题在于 UL 中的字体大小。将其设置为 0，它将消失，但您不希望实际文本设置得这么小，因此请将 LI 字体大小设置为您想要的任何值。

<ul style="font-size:0px;">
<li style="font-size:12px;">
</ul>