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

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> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div>first</div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li><li> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div>first</div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li><li> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div>first</div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li><li> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div>first</div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li></ul>这里的例子.正如其他答案和评论所提到的，解决这一问题的最佳做法是添加font-size: 0;到父元素：ul&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;font-size:&nbsp;0; } ul&nbsp;li&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;font-size:&nbsp;14px; &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;inline-block; }这对HTML可读性更好(避免在一起运行标记等)。间距效应是由于字体的间距设置所致，因此必须对内联元素重新设置它，然后再为内部内容设置它。

Answer 2

解决办法：ul&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;font-size:&nbsp;0;}ul&nbsp;li&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;font-size:&nbsp;14px; &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;inline-block;}必须将父字体大小设置为0。

Answer 3

我将添加左浮动的CSS属性，如下所示。这样才能摆脱多余的空间。ul&nbsp;li&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;float:left;}