如何删除列表项之间的空格[重复]

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 以利用此显示样式的其他 属性。这通常包括希望我们的元素紧密结合在一起，这与文本完全不同。这似乎是你的问题。

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

保持内联

1. （不推荐）对 LI 应用负边距以将它们移动。

   li { margin: -4px; }
   

请注意，您需要“猜测”空间的大小。不建议这样做，因为正如 Arthur 在下面的 cmets 中出色指出的那样，用户可以更改浏览器的缩放比例，这很可能会扰乱代码的呈现。此外，此代码需要过多的猜测和计算。有更好的解决方案适用于所有条件。

1. 去掉空格

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

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

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

3. 跳过结束标签 (HTML4 valid / HTML5 Valid) JSFiddle

   <li>One
   <li>Two
   

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

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

5. 利用元素之间的间距计算为父字体大小的百分比这一事实。因此，将父级的字体大小设置为 0 会导致没有空格。请记住在li 上设置非零字体大小，以便文本本身具有非零字体大小。 View on JSFiddle.

浮动它们

1. 改为浮动它们。如果你这样做，你可能会想要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;
}

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

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

如果您尝试在<li>s 上执行float:right;，那么它们的顺序将被交换，这意味着：列表中的第一项将是最后一项，第二项是最后一项之前的一项，依此类推。

在 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

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

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

Answer 6

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

有两种解决方案：

1) 更改使它们内联显示的方式，我建议在所有列表项上使用浮点数，然后使用各种 clearfix。

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 7

这是我的尝试。希望能帮助到你。正如肖恩·邓伍迪（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;}

Answer 8

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

一个人不推荐

li { margin: -4px; }

但对其稍作改动，即使字体大小发生变化或浏览器放大时也能正常工作

li{ margin-right: -0.25em; }

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