宽度为 50% 的边框框无法放入一行

Question

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

[图1]

然而，li 的宽度需要小于 50%，比如 49.6% 或更少。如果不是，一些 space 出现在 li 和 li 之间，原因不明，即使我为 li 设置了 box-sizing: border-box 和 margin: 0 ].

[图2]

我知道我可以用float: left让它像第一张图一样工作，但我想知道为什么图2中存在space。

P.S.: 我的浏览器用的是Chrome，如果是Safari，49.5%就可以了。

Answer 1

不看代码很难知道，但我认为问题是li 不同行上的元素将在它们之间显示空格。空格通常不会对 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>

这里有一个用于演示的codepen。如果不能修改原来的html，试试加个负边距。

Border-box with 50% width can't fit into one line