内联-阻止列表项之间的空格

Question

内联-阻止列表项之间的空格为什么内联块列表项目中有一个空格？无论我如何把我的列表项目变成菜单，我总是有空格。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>

Answer 1

我见过这个，以前也回答过：

后进一步研究我发现inline-block是与空格相关的方法，并且依赖于字体设置。在本例中，呈现4PX。

为了避免这种情况，您可以运行所有的liS一起放在一行中，或者阻止结束标记，然后一起开始标记，如下所示：

<ul>
        <li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li></ul>

这里的例子.

---

正如其他答案和评论所提到的，解决这一问题的最佳做法是添加font-size: 0;到父元素：

ul {
    font-size: 0;
}

ul li {
    font-size: 14px;
    display: inline-block;
}

这对HTML可读性更好(避免在一起运行标记等)。间距效应是由于字体的间距设置所致，因此必须对内联元素重新设置它，然后再为内部内容设置它。

Answer 2

解决办法：

ul {
    font-size: 0;}ul li {
    font-size: 14px;
    display: inline-block;}

必须将父字体大小设置为0。

Answer 3

我将添加左浮动的CSS属性，如下所示。这样才能摆脱多余的空间。

ul li {
    float:left;}