如何删除列表项之间的空间 [英] How to remove the space between list items

问题描述

如何摆脱列表项之间的空白？我试图让它，使图像是彼此相邻。即使我已将样式设置为 marginins：0; ，它们仍然分开。

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.

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>

推荐答案

strong>

Updated Sept. 1st, 2014

在现代浏览器中， flex-box 是首选这样做的方法。它很简单：

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

ul {
  display: flex;
}

请参阅此处的JSFiddle

对于旧版浏览器支持，请参阅以下其他选项，虽然稍微复杂一点。

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

虽然每个其他答案至少有一个好的解决方案， em> all 的可能性。

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

首先，为了回答你为什么有空格的隐含问题，它在那里，因为你'

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

inline 是所有文本和图像的默认显示值的我知道的浏览器。每当在代码中有空格时，内联元素将以它们之间的间隔呈现。这是一个很好的事情，当它涉及到文本：这些单词，我键入的是分开的，因为我已经包括在代码中的空间。每行之间也有空格。

inline is 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 inline to take advantage of other properties 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.

不用多说，这里是所有我知道的方法摆脱间距：

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

1. （不推荐

li { margin: -4px; }

请注意，猜测空间的大小。这不是建议，因为，如Arthur在下面的评论中极好地指出，用户可以改变他们的浏览器的缩放，这将更可能弄乱你的代码的呈现。此外，这个代码需要太多的猜测和计算。有更好的解决方案，在所有条件下工作。

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.

1. 除去空格

1. Get rid of the whitespace

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

使用注释将空白注释为注释 JSFiddle

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

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

<li>One
<li>Two

标记本身中的空格（注意：早期的Internet Explorers不会喜欢此）

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

利用元素之间的间距计算为父级的字体大小。因此，将父级的字体大小设置为0不会导致空格。只要记住在 li 上设置非零字体大小，以使文本本身具有非零字体大小。 在JSFiddle上查看。

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 li so that the text itself has a nonzero font size. View on JSFiddle.

< h2>浮动

Floating them

1. 改为浮动。如果您这样做，您可能需要清除父母。

li { float: left; display: block; }

这篇关于如何删除列表项之间的空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！