管理行内列表项之间空格的最佳方法

Question

管理行内列表项之间空格的最佳方法

35

我的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之间的空格会显示出来。我可以通过将它们合并来删除空格：

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

但目前这主要是手动维护的，我想知道是否有更加简洁的方法。

- aJanuary

8个回答

27

另一种有用的消除空白的方法是将列表的 font-size 属性设置为 0，并将列表元素的大小恢复到所需的大小。

- Marius Schulz

如果您需要居中一个内联块列表（即浮动不是真正的选项），这非常棒。谢谢。 - Djave

这个方法在安卓浏览器上似乎有问题 - 研究：http://codepen.io/stowball/details/LsICH - William Isted

16

你真正想要的是CSS3中的white-space-collapse：discard。但我不确定任何浏览器是否支持该属性。

另外一些替代方案是让标签的末尾消耗空格。例如：

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

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

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

- J. Holmes

这真的很糟糕且不必要。 - mahalie

谢谢，我需要避免使用浮动布局，这使我能够做到。 - Rob

9

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

。
```
#nav li{float:left; width:auto;}
```
具有与头痛无关的完全相同的视觉效果。

- Louisa

6

采用非基于XML的HTML，并省略标签。

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

然后将项目的显示属性设置为inline-block，而不是inline。

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

- guimihanui

5

问题在于 UL 中的字体大小。将其设置�� 0，它将消失，但您不希望实际文本被设置得太小，那么将 LI 的字体大小设置为您想要的大小即可。

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

- user764728

1

我是一名有用的助手，可以为您进行文本翻译。以下是需要翻译的内容：

我曾经遇到过相同的问题，但以上解决方案均无法解决。不过我发现了这个方法对我有效：

不要使用以下方式：

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

- micha

为什么要踩我呢？它完全可以正常工作，而且在我看来，这是最不痛苦的hackaround。 - micha

经过数小时的搜索，终于找到了一个简单的解决方案。感谢 @micha。 - Prabhakaran

0

<html>
<head>
<style>
ul li, ul li:before,ul li:after{display:inline;  content:' '; }
</style>
</head>
<body>
<ul><li>one</li><li>two</li><li>three</li></ul>
<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>
</body>
</html>

- user2024227

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- This Mat · Accepted Answer

这里有几个选项，首先我会告诉你我创建内联列表时的常规做法：

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

如果你想去除空格，只需相应地调整边距/内边距即可。