Html 内联块列表项之间的空格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5256533/
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
A Space between Inline-Block List Items
提问by Tyler Crompton
Possible Duplicate:
Unwanted margin in inline-block list items
How to remove “Invisible space” from HTML
Why do the inline-block list items have a space in them? No matter how I make my list items into a menu, I always get spaces.
为什么内联块列表项中有一个空格？无论我如何将列表项放入菜单中，我总是有空格。
li {
border: 1px solid black;
display: inline-block;
height: 25px;
list-style-type: none;
text-align: center;
width: 50px;
}
ul {
padding: 0;
}<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>回答by Kyle
I have seen this and answered on it before:
我以前看过这个并回答过：
After further researchI have
discovered that inline-blockis a
whitespace dependent method and
is dependent on the font setting. In this case 4px is rendered.
经过进一步研究，我发现这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>
<ul> <li> <div>first</div> </li><li> <div>first</div> </li><li> <div>first</div> </li><li> <div>first</div> </li> </ul>
As mentioned by other answers and comments, the best practice for solving this is to add font-size: 0;to the parent element:
正如其他答案和评论所提到的，解决这个问题的最佳实践是添加font-size: 0;到父元素：
ul {
font-size: 0;
}
ul li {
font-size: 14px;
display: inline-block;
}
This is better for HTML readability (avoiding running the tags together etc). The spacing effect is because of the font's spacing setting, so you must reset it for the inlined elements and set it again for the content within.
这对于 HTML 可读性更好（避免将标签一起运行等）。间距效果是因为字体的间距设置，所以你必须为内联元素重新设置它，并为里面的内容重新设置它。
回答by David Horák
Solution:
解决方案：
ul {
font-size: 0;
}
ul li {
font-size: 14px;
display: inline-block;
}
You must set parent font size to 0
您必须将父字体大小设置为 0
回答by Gerbus
Actually, this is not specific to display:inline-block, but also applies to display:inline. Thus, in addition to David Horák's solution, this also works:
实际上，这并不特定于display:inline-block，但也适用于display:inline。因此，除了 David Horák 的解决方案外，这也适用：
ul {
font-size: 0;
}
ul li {
font-size: 14px;
display: inline;
}
回答by Trevor G
I would add the CSS property of float left as seen below. That gets rid of the extra space.
我会添加 float left 的 CSS 属性，如下所示。这摆脱了额外的空间。
ul li {
float:left;
}
回答by Leo Pitt
Another solution, similar to Gerbus' solution, but this also works with relative font sizing.
另一种解决方案，类似于Gerbus 的解决方案，但这也适用于相对字体大小。
ul {
letter-spacing: -1em; /* Effectively collapses white-space */
}
ul li {
display: inline;
letter-spacing: normal; /* Reset letter-spacing to normal value */
}
回答by Fabien
I had the same problem, when I used a inline-block on my menu I had the space between each "li" I found a simple solution, I don't remember where I found it, anyway here is what I did.
我遇到了同样的问题，当我在菜单上使用内联块时，每个“li”之间都有空格，我找到了一个简单的解决方案，我不记得我在哪里找到的，无论如何这就是我所做的。
<li><a href="index.html" title="home" class="active">Home</a></li><!---->
<li><a href="news.html" title="news">News</a></li><!---->
<li><a href="about.html" title="about">About Us</a></li><!---->
<li><a href="contact.html" title="contact">Contact Us</a></li>
You add a comment sign between each end of, and start of : "li" Then the horizontal space disappear. Hope that answer to the question Thanks
您在每个结尾和开头之间添加一个注释符号：“li”然后水平空间消失。希望能回答问题 谢谢
回答by Mya
just remove the breaks between li's in your html code... make the li's in one line only..
只需删除 html 代码中 li 之间的分隔符...使 li 仅在一行中...
回答by Frosty Z
Even if its not inline-blockbased, this solution might worth consideration (allows nearly same formatting control from upper levels).
即使它不是inline-block基于，这个解决方案也可能值得考虑（允许来自上层的几乎相同的格式控制）。
ul {
display: table;
}
ul li {
display: table-cell;
}
- IE8+ & major browsers compatible
- Relative/fixed font-size independent
- HTML code formatting independent (no need to glue
</li><li>)
- IE8+ 和主流浏览器兼容
- 相对/固定字体大小独立
- HTML 代码格式独立（无需粘合
</li><li>）
