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

Question

如何摆脱列表项之间的空白？我正在努力使图像彼此相邻。即使我将样式设置为margins: 0;，它们仍然分开。

CSS

ul.frames{
  margin: 20px;
  width: 410px;
  height: 320px;
  background-color: grey;
  float: left;
  list-style-type: none;
}

ul.frames  li {
  display:inline;
  margin: 0;
  display: inline;
  list-style: none;
}

ul.frames li img {
  margin: 0 0 0 0;
}

HTML

<li>
  <img id="myImg" src="img.jpg" width="102.5px" height="80px"/>
</li>
<li>
  <img id="myImg2" src="img.jpg" width="102.5px" height="80px"/>
</li>
<li>
  <img id="myImg3" src="img.jpg" width="102.5px" height="80px"/>
</li>
<li>
  <img id="myImg4" src="img.jpg" width="102.5px" height="80px"/>
</li>

Answer 1

2014年9月1日更新

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

ul {
  display: flex;
}

在这里查看JSFiddle 。

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

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

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

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

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

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

保持内联

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

   li { margin: -4px; }
   

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

1. 摆脱空白

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

2. 使用注释使空白成为注释

   <li>One</li><!--
   

   –>

3. Two

4. 跳过结束标记（对HTML4有效]/对[HTML5有效

   <li>One
   

5. Two

6. 将空白放在标签本身中（ 注意：早期的Internet Explorer不会这样 ）

   <li>One</li
   

   Two</li
   
   

7. 利用这样的事实，即元素之间的间距是按父字体大小的百分比计算的。因此，将父级的字体大小设置为0将导致没有空格。只需记住在上设置非零字体大小，以li使文本本身具有非零字体大小。在JSFiddle上查看。

漂浮他们

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

   li { float: left; display: block; }