41

如何摆脱列表项之间的空白？我正在努力使图像彼此相邻。即使我将样式设置为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>
4

8 回答 8

103

2014 年 9 月 1 日更新

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

ul {
  display: flex;
}

在此处查看 JSFiddle。

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

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

首先，要回答为什么会有间距的隐含问题，它之所以存在是因为您已将 LI 设置为显示为内联元素。

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

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

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

保持内联

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

    li { margin: -4px; }

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

  1. 摆脱空白

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

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

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

  3. 跳过结束标记（HTML4 有效/ HTML5 有效）JSFiddle

    <li>One
<li>Two

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

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

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

漂浮它们

  1. 改为浮动它们。如果你这样做，你可能想要clearfix 父级。

    li { float: left; display: block; }
于 2013-01-05T16:25:16.003 回答
30

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

只需这样做：

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

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

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

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

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

于 2013-08-28T05:32:18.817 回答
3

您应该像这样删除 ul 标签中的所有空格：http: //jsfiddle.net/dFRYL/3/

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

于 2013-01-05T16:21:08.290 回答
1

您可以像这样使用负边距：

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

看看这里。

它也可以上下工作，我在此处添加了另一个以显示。

于 2013-01-05T16:18:04.433 回答
1

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

<ul>
     <li>One</li><li>
     Two</li><li>
     Three</li>
</ul>
于 2015-05-22T05:58:18.093 回答
0

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

有两种解决方案：

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

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）

于 2013-01-05T16:22:44.290 回答
0

这是我的尝试。希望能帮助到你。正如肖恩·邓伍迪（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;}
于 2013-01-05T17:42:08.890 回答
0

我会将您的 li 元素更改为内联块。

一个人不推荐

li { margin: -4px; }

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

li{ margin-right: -0.25em; }

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

于 2014-04-04T01:53:44.460 回答