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

<强> See a JSFiddle here

对于旧版浏览器支持，请参阅下面的其他选项，这些选项仍然很好，虽然稍微复杂一些。

虽然其他每个答案都提供了至少一个好的解决方案，但似乎没有一个提供所有的可能性。这就是我在这里要做的事情。

首先，要回答你隐含的为什么存在间距的问题，那就是因为你将LI设置为显示为内联元素。

inline是我所知道的所有浏览器中文本和图像的默认显示值。只要代码中有空格，内联元素就会在它们之间以间距呈现。在文本方面这是一件好事：由于我在代码中包含的空间，我输入的这些单词是间隔开的。每条线之间也有空间。内联元素的这种行为使得网络上的文本完全可读。

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

不用多说，以下是我所知道的摆脱间距的所有方法：

让它们保持内联

（不推荐）对LI应用负边距以移动它们。
```
li { margin: -4px; }
```

请注意，您需要'猜测'空间的大小。这不推荐，因为正如Arthur在下面的评论中指出的那样，用户可以更改浏览器的缩放，这很可能会破坏代码的渲染。此外，此代码需要过多的猜测和计算。有更好的解决方案可以在所有条件下工作。

摆脱空白
```
<li>One</li><li>Two</li>
```
使用注释将空白作为评论JSFiddle
```
<li>One</li><li>Two</li>
```
略过结束标记（HTML4 valid / HTML5 Valid）JSFiddle
```
<li>One
<li>Two
```
将空白放在标记本身（注意：早期的Internet Explorer不会喜欢这个）
```
<li>One</li
><li>Two</li
>
```
利用元素之间的间距计算为父级字体大小的百分比这一事实。因此，将父级的字体大小设置为0将导致无空格。请记住在li上设置非零字体大小，以便文本本身具有非零字体大小。 View on JSFiddle.

浮动他们

反而浮动它们。如果你这样做，你可能想要clearfix the parent。
```
li { float: left; display: block; }
```

Answer 2

难以置信但这里没有人为这个问题提供了合适的解决方案。

这样做：

ul.frames {
  font-size: 0;
}
ul.frames li {
  font-size: 14px; font-size:1.4rem;
  display: inline;
}

请注意，我们无法始终有权修改标记。当解决方案只有两个<li>属性时，尝试使用JavaScript从font-size s中删除空格是完全没必要的。

此外，浮动<li>会引入另一个潜在问题：您无法居中和右对齐列表项。

如果您尝试在float:right;上执行<li>，那么他们的订单将被交换，这意味着：列表中的第一项将是最后一项，第二项是最后一项，等等。

在SO中查看此其他帖子：A Space between Inline-Block List Items

Answer 3

您应该删除ul标记中的所有空格，如下所示：http://jsfiddle.net/dFRYL/3/

由于<li>元素是内联的，因此在它们之间或之间写入空格时，将显示空格。

Answer 4

你可以使用这样的负边距：

margin-right: -4px;
margin-bottom: -4px;

看看here。

它也可以上下运行，我添加了另一个来显示here。

Answer 5

我会将你的li元素更改为inline-block。

一个人不推荐

li { margin: -4px; }

但即使字体大小发生变化或浏览器放大时，对其进行细微更改也会导致其工作

li{ margin-right: -0.25em; }

这应该完全解决白空间问题。但是，如果您使用的设计不合理的字体不遵循正确的字母高度标准，则可能会导致问题。然而，那些更难找到，大多数字体谷歌主机没有这个问题。

Answer 6

获得空格的原因是因为元素之间有空格（换行符）

<ul>
     <li>One</li><li>
     Two</li><li>
     Three</li>
</ul>

Answer 7

使用display:inline;会导致HTML中的空格在显示HTML时创建空格。

有两种解决方案：

1）更改你如何使它们显示为内联，我建议在所有列表项上使用浮点数，然后使用clearfix of sort。

2）删除列表项之间的所有空格，例如

<li><img id="myImg" src="http://stephboreldesign.com/wp-content/uploads/2012/03/lorem-ipsum-logo.jpg" width="102.5px" height="80px"/></li><li><img id="myImg2" src="http://stephboreldesign.com/wp-content/uploads/2012/03/lorem-ipsum-logo.jpg" width="102.5px" height="80px"/></li><li><img id="myImg3" src="http://stephboreldesign.com/wp-content/uploads/2012/03/lorem-ipsum-logo.jpg" width="102.5px" height="80px"/></li><li><img id="myImg4" src="http://stephboreldesign.com/wp-content/uploads/2012/03/lorem-ipsum-logo.jpg" width="102.5px" height="80px"/></li>

我个人会推荐选项1（我讨厌display: inline）

Answer 8

这是我的尝试。希望能帮助到你。正如Sean Dunwoody所提到的，你的html中的空格可能是空间的原因，但我已经浮动了li并使图像显示：block;。留下评论我做出改变的地方。希望它有所帮助：http://jsfiddle.net/FJ3nV/

这是我的小但主要的变化：

/*
* Added float left
*/
ul.frames  li {
  margin: 0;
  list-style: none; 
  float:left;
}

/* 
*  Moved inline sizing here just to clear up obtrusive html.
*  Added display block.
*/
ul.frames li img{width:102px; height:80px; display:block;}

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

8 个答案:

让它们保持内联

浮动他们