可能重复:
Unwanted margin in inline-block list items
How to remove “Invisible space” from HTML
为什么行内块列表项中有空格?无论我如何将我的列表项添加到菜单中,我总是会得到空格。
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>
发布于 2011-03-10 15:22:53
我以前见过并回答过这个问题:
在further research之后,我发现inline-block
是一个依赖于空格的方法,并且依赖于字体设置。在这种情况下,将渲染4px。
为了避免这种情况,您可以在一行中一起运行所有的li
,或者像这样一起阻止结束标记和开始标记:
正如其他答案和评论所提到的,解决此问题的最佳实践是将font-size: 0;
添加到父元素:
ul {
font-size: 0;
}
ul li {
font-size: 14px;
display: inline-block;
}
这对于HTML的可读性更好(避免将标签放在一起运行等)。间距效果是由于字体的间距设置造成的,因此您必须为内联元素重置它,并为其中的内容重新设置它。
发布于 2012-05-18 23:24:05
解决方案:
ul {
font-size: 0;
}
ul li {
font-size: 14px;
display: inline-block;
}
必须将父字体大小设置为0
发布于 2011-07-24 11:43:45
我将添加浮动向左的CSS属性,如下所示。这就消除了额外的空间。
ul li {
float:left;
}
https://stackoverflow.com/questions/5256533
复制相似问题