如何删除列表项之间的空格

2014年9月1日更新

在现代浏览器中，flex-box是执行此操作的首选方法。就像这样简单：

ul {  display: flex;}

在这里查看JSFiddle 。

对于旧版浏览器的支持，请参考下面的其他选项，尽管稍微复杂一些，但它们仍然不错。

尽管每个其他答案至少提供了一个好的解决方案，但似乎没有一个提供所有可能性。这就是我将在这里尝试做的。

首先，要回答关于 为什么 存在间距的隐式问题，它 之所以 存在，是因为您已将LI设置为显示为嵌入式元素。

inline

是我所知道的所有浏览器中文本和图像的默认显示值。只要代码中有空格，内联元素就会以它们之间的间隔呈现。当涉及到文本时，这是一件好事：由于我在代码中包含的空格，因此我将这些键入的单词分隔开。每行之间也有间隔。正是内联元素的这种行为使Web上的文本完全可读。

但是有时我们希望非文本元素能够

inline

利用此显示样式的其他
属性。这通常包括我们的元素紧密贴合在一起的愿望，这与文本完全不同。这似乎是您的问题。

事不宜迟，以下是我所知道的摆脱间距的所有方法：

保持内联

（ 不建议 ）对LI施加负边距以将其移开。

li { margin: -4px; }

请注意，您将需要“猜测”空间的大小。不建议这样做，因为正如Arthur在下面的注释中所指出的那样，用户可以更改其浏览器的Zoom，这很可能会弄乱代码的呈现。此外，此代码需要太多的猜测和计算。有更好的解决方案可以在所有条件下工作。

摆脱空白

<li>One</li><li>Two</li>

将空白放在标签本身中（ 注意：早期的Internet Explorer不会这样 ）
```
<li>One</li
```
Two</li
利用这样的事实，即元素之间的间距是按父字体大小的百分比计算的。因此，将父级的字体大小设置为0将导致没有空格。只需记住在上设置非零字体大小，以
```
li
```
使文本本身具有非零字体大小。在JSFiddle上查看。

浮动他们。如果这样做，您可能需要清除父项。

li { float: left; display: block; }