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

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

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

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

让它们内联

1. (不推荐)对LI施加负边距以移动它们.

   li { margin: -4px; }
   

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

2. 摆脱空白

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

3. 使用注释使空格成为注释JSFiddle

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

4. 跳过结束标记(HTML4有效/HTML5有效)JSFiddle

   <li>One
   <li>Two
   

5. 将空格放在标签本身(注意:早期的Internet Explorers不会喜欢这个)

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

6. 利用元素之间的间距计算为父元素字体大小的百分比这一事实.因此,将父级的字体大小设置为0将导致无空格.只需记住li在文本上设置非零字体大小,以便文本本身具有非零字体大小.在JSFiddle上查看.

漂浮它们

1. 把它们漂浮起来.如果这样做,您可能希望清除父级.

   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>当解决方案只是两个font-size属性时,尝试使用JavaScript 从s中删除空格是完全没有必要的.

此外,浮动<li>s会引入另一个潜在的问题:您无法对齐列表项的中心和右对齐.

如果您尝试对s 进行操作float:right;,<li>那么它们的订单将被交换,这意味着:列表中的第一项将是最后一项,第二项是最后一项,依此类推.

在SO中查看此其他帖子:内联块列表项之间的空格