Question

我为li设置了width: 50%个元素，以便将ul块分成两行li，如下图所示。这里是JS bin，例如 normalize.css 。

nice arrangement of li [图1]

但是，li的宽度必须小于50％，如49.6％或更低。如果没有，则li和li之间会出现一些空格，原因不明，即使我为box-sizing: border-box设置了margin: 0和li。

bad arrangement of li [图2]

我知道我可以使用float: left使其像第一张图片一样工作，但我想知道为什么图片2中存在空间。

P.S。：我在浏览器中使用Chrome浏览器，如果在Safari上，则可以使用49.5％。

Answer 1

如果没有看到代码，很难知道，但我认为问题是李不同行上的元素将在它们之间显示空格。空格通常不会对HTML产生影响，但是在li元素之间有空格的情况下。所以下面将显示空格

<ul> 
    <li style="display: inline;">1</li> 
    <li style="display: inline;">2</li> 
    <li style="display: inline;">3</li> 
</ul>

但是这个赢了。

<ul> 
    <li style="display: inline;">1</li><li style="display: inline;">2</li><li style="display: inline;">3</li> 
</ul>

这是一个用于演示的编码器。如果您无法修改原始html，请尝试添加负边距。