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

Question

提问by user1940007

How to you get rid of the white space between list items? I am trying to make it so that the images are right next to each other. Even though I have set the styling to margins: 0;, they are still separated.

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

回答by jamesplease

Updated Sept. 1st, 2014

2014 年 9 月 1 日更新

In modern browsers, flex-boxis the preferred method of doing this. It's as simple as:

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

ul {
  display: flex;
}

See a JSFiddle here.

在此处查看 JSFiddle。

For legacy browser support refer to the other options below, which are still just fine, albeit slightly more complex.

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

Though each of the other answers gives at least one good solution, none seem to provide allof the possibilities. And that's what I'll try to do here.

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

Firstly, to answer your implicit question of whythere's spacing, it's there because you've set your LIs to display as inline elements.

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

inlineis the default display value for text and images in all of the browsers that I know of. Inline elements are rendered with spacing between them whenever there's whitespace in your code. This is a good thing when it comes to text: these words that I've typed are spaced apart because of the space I've included in the code. And there's also space between each line. It's this very behavior of inline elements is what makes text on the web readable at all.

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

But sometimes we want non-text elements to be inlineto take advantage of otherproperties of this display style. And this typically includes a desire for our elements to fit snugly together, quite unlike text. And that seems to be your problem here.

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

Without further ado, here are all the ways I know of to get rid of the spacing:

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

Keeping them inline

保持它们内联

(Not recommended) Apply negative margin to the LIs to move them over.
```
li { margin: -4px; }
```

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

Note that you'll need to 'guess' the size of a space. This isn't recommended because, as Arthur excellently points out in the comments below, users can change the Zoom of their browser, which would more than likely mess up the rendering of your code. Further, this code requires too much guesswork and calculation. There are better solutions that work under all conditions.

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

Get rid of the whitespace
```
<li>One</li><li>Two</li>
```
Use comments to make the whitespace a comment JSFiddle
```
<li>One</li><li>Two</li>
```
Skip the closing tag (HTML4 valid/ HTML5 Valid) JSFiddle
```
<li>One
<li>Two
```
Put the whitespace in the tag itself (Note: Early Internet Explorers will not like this)
```
<li>One</li
><li>Two</li
>
```
Take advantage of the fact that the spacing between the elements is calculated as a percentage of the font size of the parent. Consequently, setting the parent's font size to 0 results in no space. Just remember to set a non-zero font-size on the liso that the text itself has a nonzero font size. View on JSFiddle.

摆脱空白
```
<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
>
```
利用元素之间的间距计算为父字体大小的百分比这一事实。因此，将父字体大小设置为 0 会导致没有空格。请记住在上设置非零字体大小，li以便文本本身具有非零字体大小。在 JSFiddle 上查看。

Floating them

漂浮它们

Float them instead. You'll probably want to clearfix the parentif you do this.
```
li { float: left; display: block; }
```

而是漂浮它们。如果你这样做，你可能想要清除父级。
```
li { float: left; display: block; }
```

Answer 2

回答by Ricardo Zea

Incredible but no one here has provided the proper solution for this problem.

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

Just do this:

只需这样做：

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

Keep in mind that we won't always have access to modify the markup. And trying to remove the spaces from the <li>s with JavaScript would be totally unnecessary when the solution is simply two font-sizeproperties.

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

Also, floating the <li>s introduces another potential problem: You wouldn't be able center and right align the list items.

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

If you try to do float:right;on the <li>s then their order will be swapped, meaning: the first item in the list would be last, the second item is the one before the last, and so on.

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

Check out this other post here in SO: A Space between Inline-Block List Items

在 SO: A Space between Inline-Block List Items 中查看另一篇文章

Answer 3

回答by arthur

You should just remove all the spaces in the ul tags just like this: http://jsfiddle.net/dFRYL/3/

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

Since the <li>elements are inline, in you write spaces in or between them you will have spaces displayed.

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

Answer 4

回答by Hymancogdill

You can use negative margins like this:

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

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

Take a look here.

看看这里。

It also works up and down, I added another one to show that here.

它也可以上下工作，我在这里添加了另一个来证明这一点。

Answer 5

回答by Andy

The reason you get the spaces is because you have spaces between the elements (line break)

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

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

Answer 6

回答by Sean

Using display:inline;causes whitespace in your HTML to create whitespace when displaying the HTML.

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

There are two solutions to this:

对此有两种解决方案：

1) Change how you make them appear inline, I would recommend using floats on all of the list items, then using a clearfix of sorts.

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

2) Remove all whitespace between your list items, e.g.

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>

Personally I would recommend option 1 (I hate display: inline)

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

Answer 7

回答by Jon Paul Miles

I would change your li elements to inline-block.

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

One person did not recommend

一个人不推荐

li { margin: -4px; }

But making a slight change to it will cause it to work even when the font size changes or when the browser zooms in

但是对其稍作更改将使其即使在字体大小更改或浏览器放大时也能正常工作

li{ margin-right: -0.25em; }

That should fix that white space problem completely. However, if you are using a poorly designed font-face that doesn't follow correct letter-height standards then it may cause a problem. However those are harder to find and most of the fonts google hosts don't have that issue.

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

Answer 8

回答by robx

here is my attempt at it. Hope it helps. As Sean Dunwoody mentioned, white space in your html can be a cause of the space, but I've floated the li and made the image to display:block;. Left comment on where I made changes. Hope it helps: http://jsfiddle.net/FJ3nV/

这是我的尝试。希望能帮助到你。正如肖恩·邓伍迪 (Sean Dunwoody) 所提到的，您的 html 中的空白可能是造成空间的原因，但我已经浮动了 li 并使图像显示为：block;。在我进行更改的地方留下评论。希望它有帮助：http: //jsfiddle.net/FJ3nV/

Here my small but main changes:

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

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

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

提问by user1940007

回答by jamesplease

Keeping them inline

保持它们内联

Floating them

漂浮它们

回答by Ricardo Zea

回答by arthur

回答by Hymancogdill

回答by Andy

回答by Sean

回答by Jon Paul Miles

回答by robx

相关推荐

最近更新

标签

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

提问by user1940007

回答by jamesplease

Keeping them inline

保持它们内联

Floating them

漂浮它们

回答by Ricardo Zea

回答by arthur

回答by Hymancogdill

回答by Andy

回答by Sean

回答by Jon Paul Miles

回答by robx

相关推荐

Html 使用 CSS 将 div 转换为 span

Html 具有内联样式的元素内元素的 CSS 选择器？

Html 在 youtube iframe 上覆盖不透明的 div

Html 使用带有内联 CSS 的 CSS :before 和 :after 伪元素？

相关推荐

最近更新

标签