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

Question

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

48

如何消除列表项之间的空白？我想让图片贴在一起。尽管我已经将样式设置为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>

- user1940007

请展示HTML的其余部分，因为你需要 <ul class="frames"> 容器使CSS起作用。 - ocodo

是的，我有那个，但下面的答案起作用了。 - user1940007

这不是一个重复的问题。两个问题可以有相同的答案，但仍然是不同的问题。 - undefined

8个回答

32

令人难以置信的是，这里没有人提供这个问题的正确解决方案。

只需要这样做：

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

请记住，我们并不总是可以修改标记的访问权限。尝试使用JavaScript从<li>中删除空格是完全不必要的，因为解决方案只需要两个font-size属性。

此外，对<li>进行浮动会导致另一个潜在问题：您将无法使列表项居中和右对齐。

如果您尝试在<li>中执行float:right;，则它们的顺序将被交换，这意味着列表中的第一项将成为最后一项，第二项是倒数第二项，依此类推。

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

- Ricardo Zea

1

完美的解决方案，适用于需要内联元素的人！ - user828591

1

你太棒了兄弟，你的答案非常正确。 - Hasan

3

你出现空格的原因是元素之间有空格（换行）。

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

- Andy

我的问题是样式表链接问题。如果您正在使用Bootstrap，则它们的样式可能会继承到您的元素上。我在这里回答了：https://stackoverflow.com/questions/38962503/override-bootstrap-style-not-working/49657636#49657636 - Deke

3

你只需要像这样删除ul标签中的所有空格：http://jsfiddle.net/dFRYL/3/。由于li元素是内联的，如果在它们之间或其中写入空格，则会显示空格。

- arthur

1

你可以使用如下的负边距：

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

请看这里。

它也可以上下移动，我添加了另一个来展示这里。

- jackcogdill

我看不到这个 jsfiddle。 - user1940007

这个怎么样？（http://jsfiddle.net/dFRYL/5/show/） - jackcogdill

@yentup，你能否恢复这个问题，这样我就可以回答了，或者来到PHP聊天室http://chat.stackoverflow.com/rooms/11/php。如果你想看答案，请在PHP聊天室中查看此消息http://chat.stackoverflow.com/transcript/message/7030329#7030329。 - NullPoiиteя

如果我使用例如 body { font-size: 90px; }，这是无法正常工作的。 - Павел Иванов

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）

- Sean

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

- robx

0

我会把你的li元素改成inline-block。

有一个人不建议。

li { margin: -4px; }

但是对它进行轻微的更改将使其在字体大小更改或浏览器缩放时仍能正常工作。

li{ margin-right: -0.25em; }

那应该完全解决那个空格问题。但是，如果您正在使用设计不佳、不遵循正确字母高度标准的字体，则可能会出现问题。不过这些很难找到，谷歌托管的大多数字体都没有这个问题。

- Jon Paul Miles

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jamesplease · Accepted Answer

2014年9月1日更新

在现代浏览器中，使用flex-box是首选的方法。它非常简单：

ul {
  display: flex;
}

点击此处查看JSFiddle示例.

对于旧版浏览器支持，请参考下方的其他选项，它们仍然是可行的，虽然略微复杂一些。

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

首先，为了回答您隐含的问题——为什么会有间距——这是因为您将LIs设置为显示为内联元素。

inline是我所知道的所有浏览器中文本和图像的默认显示值。当代码中存在空格时，内联元素之间会呈现间距。对于文本来说，这是一件好事：我输入的这些单词之间由于我包括在代码中的空格而分开。每行之间也有间距。正是内联元素的这种行为使得Web上的文本可读。

但有时我们希望非文本元素为inline，以利用此显示样式的其他属性。这通常包括希望我们的元素紧密地拟合在一起，与文本大不相同。这似乎是您在这里遇到的问题。

话不多说，以下是我知道的消除间距的所有方法：

保持内联

（不建议使用）对LIs应用负边距以将它们移动过去。
```
li { margin: -4px; }
```
请注意，您需要“猜测”空间的大小。这并不推荐，因为正如Arthur在下面的评论中很好地指出的那样，用户可以更改浏览器的缩放比例，这很可能会破坏您代码的渲染。此外，这段代码需要太多的猜测和计算。有更好的解决方案可以在所有条件下使用。
消除空格
```
<li>One</li><li>Two</li>
```
使用注释将空格变为注释 JSFiddle

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

HTML4 有效

HTML5 有效

JSFiddle

<li>One
<li>Two

注意: 早期的Internet Explorer不支持这种写法

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

在JSFiddle上查看。

可以使用浮动代替。如果这样做，您可能需要清除浮动（clearfix）。

li { float: left; display: block; }