Html 内联块列表项中不需要的边距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4969082/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Unwanted margin in inline-block list items
提问by Diego
I have the following HTML:
我有以下 HTML：
<ul>
<li>
<div>first</div>
</li>
<li>
<div>first</div>
</li>
<li>
<div>first</div>
</li>
<li>
<div>first</div>
</li>
</ul>
and the following css rules:
以及以下css规则：
ul {
padding: 0;
border: solid 1px #000;
}
li {
display:inline-block;
padding: 10px;
width: 114px;
border: solid 1px #f00;
margin: 0;
}
li div {
background-color: #000;
width: 114px;
height: 114px;
color: #fff;
font-size: 18px;
}
For some strange reason, the list items appear with a margin around them in both Firefox and Chrome. Looking at firebug, the list items do not have any margin at all, but there seems to be a void space between them.
出于某种奇怪的原因，列表项在 Firefox 和 Chrome 中都带有边距。看看萤火虫，列表项根本没有任何边距，但它们之间似乎有一个空白空间。
If I later on add more list items via javascript using
如果我稍后使用 javascript 添加更多列表项
$('<li><div>added via js</div></li>').appendTo($('ul'));
the "margin" doesn't appear around the new elements:
“边距”不会出现在新元素周围：
Any idea of what the hell's happening here?
知道这里发生了什么吗？
回答by Kyle
This is caused by the display: inline-block;
这是由 display: inline-block;
li {
display: inline-block;
padding: 10px;
width: 114px;
border: solid 1px #f00;
margin: 0;
}
Change it to float: left;.
将其更改为float: left;.
I thought it was the padding but took a closer look and turns out it was the display :)
我以为是内边距，但仔细一看，原来是显示器:)
After further researchI have discovered that inline-blockis a whitespace dependent method and renders a 4px margin to the right of each element.
经过进一步研究，我发现这inline-block是一种依赖于空白的方法，并在每个元素的右侧呈现 4px 的边距。
To avoid this you could run all your lis together in one line, or block the end tags and begin tags together like this:
为避免这种情况，您可以将所有lis 一起运行在一行中，或者像这样阻止结束标记和开始标记：
<ul>
<li>
<div>first</div>
</li><li>
<div>first</div>
</li><li>
<div>first</div>
</li><li>
<div>first</div>
</li>
</ul>
Hope that helps :)
希望有帮助:)
回答by Ryan
I found a very good trick to overcoming this very same issue. My list items in my top menu had whitespace margins between each after i dropped "float:left;" in favor of "display:inline-block;".
我发现了一个很好的技巧来克服同样的问题。在我删除“float:left;”后，我的顶部菜单中的列表项之间有空白页边距。赞成“显示：内联块；”。
Try setting your font-size for the unordered list to "0", ie:
尝试将无序列表的字体大小设置为“0”，即：
ul { font-size:0; }
li { font-size:18px; }
Worked for me.
为我工作。
回答by Will Tomlins
Seeing this post and the answers given, I thought I would explain what's going on here. This is not a bug, but is actually the intended behavior of inline-block.
看到这篇文章和给出的答案，我想我会解释这里发生了什么。这不是错误，但实际上是 inline-block 的预期行为。
The best way to illustrate why this is the correct behavior is with smileys in a paragraph:
说明为什么这是正确行为的最好方法是在段落中使用笑脸：
<p>
Hi, really glad to hear from you yesterday
<img src="annoying_smiley.gif"/><img src="annoying_smiley.gif"/>.
</p>
Images are, by default, displayed as inline-block (IE: a block element which obeys the inline flow - much like a single character of text). In this case you would want the two smileys to butt up next to each other, but you would still want a space between 'yesterday' and the first smiley.
默认情况下，图像显示为内联块（即：遵循内联流的块元素 - 很像文本的单个字符）。在这种情况下，您希望两个笑脸紧挨在一起，但您仍然希望在“昨天”和第一个笑脸之间留出一个空格。
Hope this explains it, and also explains why inline-block has taken so long to be fully supported; There aren't actually many use-cases for using it as intended.
希望这能解释它，也能解释为什么 inline-block 花了这么长时间才得到完全支持；实际上没有多少用例可以按预期使用它。
To answer your question, your best bet would be to do this:
要回答您的问题，最好的办法是这样做：
ul {
height: some set height
/* OR */
overflow-y: auto;
}
ul li {
float: left;
}
回答by DontShootMe
In my opinion and in this case the best thing to do is to remove the letter spacing of the li's parent and re-put it on the li!
在我看来，在这种情况下，最好的办法是删除li父级的字母间距并将其重新放在li!
So your CSS rule:
所以你的 CSS 规则：
ul{
padding: 0;
border: solid 1px #000;
letter-spacing :-4px; /*Remove the letter spacing*/
}
li{
display:inline-block;
padding: 10px;
width: 114px;
border: solid 1px #f00;
margin: 0;
letter-spacing :0px; /*Put back the letter spacing*/
}
回答by mx0
Remove all </li>tags. I don't know why but this fixes your margin problem.
删除所有</li>标签。我不知道为什么，但这可以解决您的保证金问题。
<ul>
<li>
<div>first</div>
<li>
<div>first</div>
<li>
<div>first</div>
<li>
<div>first</div>
</ul>
回答by Diego
I just found out the reason why this happens. It appears that when using inline-block, any whitespace inside the element is rendered.
我刚刚找到了发生这种情况的原因。似乎在使用 inline-block 时，元素内的任何空白都会被呈现。
So instead of writing
所以而不是写作
<li>
<div>first</div>
</li>
<li>
<div>first</div>
</li>
I should write:
我应该写：
<li>
<div>first</div>
</li><li><div>first</div>
</li><li>....
Leaving no spaces between a li and it's closing tag. The reason why this space wasn't appearing when appending via js is because the appendTo method has all the tags without any whitespace between them. Yeah, this sucks but it's the only solution if I don't want to use float:left.
在 li 和它的结束标记之间不留空格。通过 js 追加时没有出现这个空格的原因是因为 appendTo 方法具有所有标签，它们之间没有任何空格。是的，这很糟糕，但如果我不想使用 float:left，这是唯一的解决方案。
Solution found here
解决方案在这里找到
回答by Mr_Green
Changing display: inline-blockto display: table-cellalso removes the space.
更改display: inline-block为display: table-cell也会删除空格。
li {
display: table-cell;
padding: 10px;
width: 114px;
border: solid 1px #f00;
margin: 0;
}
回答by Cmndo
I found the answer to this question here: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
我在这里找到了这个问题的答案：http: //robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
He says:
他说：
"...there's one giant drawback [to inline-block]. That is, since the elements become rendered inline, white-space in your HTML code will affect the rendering. That means, if we have space between the LI elements in our code, it will render a 4 pixel margin to the right of each element."
“... [inline-block] 有一个巨大的缺点。也就是说，由于元素变成内联呈现，HTML 代码中的空白会影响呈现。这意味着，如果我们的 LI 元素之间有空格代码，它将在每个元素的右侧呈现 4 像素的边距。”
So the solution is to remove the line breaks between inline-blockelements.
所以解决办法就是去掉inline-block元素之间的换行符。
<ul>
<li><a href="#">Make</a></li>
<li><a href="#">Love</a></li>
<li><a href="#">Not</a></li>
<li><a href="#">War</a></li>
</ul>
Becomes...
变成...
<ul>
<li>
<a href="#">Make</a>
</li><li>
<a href="#">Love</a>
</li><li>
<a href="#">Not</a>
</li><li>
<a href="#">War</a>
</li>
</ul>
And the pesky margins disappear.
讨厌的边缘消失了。
回答by okarp
Try this solution:
试试这个解决方案：
<ul><!--
--><li><div>first</div></li><!--
--><li><div>first</div></li><!--
--><li><div>first</div></li><!--
--><li><div>first</div></li><!--
--></ul>
回答by rcravens
Try changing your 'display: inline-block' to 'float: left'. The separation that you are seeing then disappears. Here is a jsFiddle for you to play with:
尝试将“显示：内联块”更改为“浮动：左”。你所看到的分离然后消失了。这是一个 jsFiddle 供您使用：
http://jsfiddle.net/rcravens/XD9SD/
http://jsfiddle.net/rcravens/XD9SD/
Bob
鲍勃
