1

有谁知道为什么两个宽度为 48% 且总水平边距为 4% 的块在不换行的情况下不适合同一行？像这样简单的东西：

<div style="width: 500px; margin: 0; padding: 0;">
   <div style="width: 48%; margin: 0 0 0 2%; padding: 0; background-color: red; display: inline-block;">A</div>
   <div style="width: 48%; margin: 0 0 0 2%; padding: 0; background-color: red; display: inline-block;">B</div>
</div>

jsFiddle

它一直让我发疯，它发生在 Firefox、Chrome 和 IE8 上。Windows 和 Linux。

在我的标准缩放设置下，我可以使用“宽度：47.5%”将它们放在同一条线上。如果它是一致的，我可以忍受，但在我的最小缩放时它需要是 47.8%，在我的最大缩放时它需要是 46.5%。因此，在所有缩放中，我无法与页面上的其他元素保持一致的空白对齐。

我最初认为这只是一个舍入错误，但由于软糖因素似乎取决于字体大小，所以它必须更多。无论如何，我可能会找到一些方法让我的页面看起来不错，但我真的很想知道它为什么会这样做。它会让我今晚保持清醒。

4

2 回答 2

1

它是构成额外空间的 div 之间的空白。由于这些 div 是内联块的，因此它们周围的空白被渲染

<div class="should_fit">A</div><div class="should_fit">B</div>

http://jsfiddle.net/cMHgE/4/

于 2012-10-19T05:05:24.333 回答
0

将父元素设置为

white-space: nowrap
于 2016-04-22T21:54:29.623 回答