Question

我正在尝试使用boxsize和inline-block vs float。我很难过为什么我得到以下不同的结果：

更具体地说 - 为什么内联块包装？如果我使用Chrome的开发者工具，它会将“左”和“右”div报告为240像素宽。

由于

Answer 1

inline-block元素就像文本一样流动，因此两个div之间的换行符呈现为空格字符，这使得总宽度（左div +空格+右div）大于100％。 / p>

以下示例即使使用inline-block也会按预期运行。

<html>
<body>
<div class="container">
<div class="boxsize">Left</div><div class="boxsize">Right</div>
<div style="clear:both;"></div>
</div>
</body>
</html>

另一种方法是使用注释来删除空格，这有助于缩进。

<html>
<body>
<div class="container">
<div class="boxsize">Left</div><!--
--><div class="boxsize">Right</div>
<div style="clear:both;"></div>
</div>
</body>
</html>

Answer 2

display:inline-block添加额外像素作为两个元素之间的间距。其中一个选项是使其不显示它们。你的HTML：

<div class="boxsize">Left</div><!--spacing-->
<div class="boxsize">Right</div>

没有间距：

<div class="boxsize">Left</div
><div class="boxsize">Right</div>

Example

Answer 3

使用inline-block时，白色间距显示为空格。

使用float或删除左侧和右侧div之间的空格。

Answer 4

正如您在＆＃34; Codepen - Inline-block＆＃34;中看到的那样码。内联块充当新行字符。它不允许其他字段对齐。要包装字段，您需要删除<div class="boxsize">Left</div> <div class="boxsize">Right</div> to <div class="boxsize">Left</div><div class="boxsize">Right</div>

之间的空格

Answer 5

浮动元素（通常是文本之间的空格）将被阻止形式换行。并且inline-block元素保留空白区域。

有几种方法可以防止这个问题。

Read This

这里是white-space: nowrap;的例子：

div.container {
 width:30em;
 border:10px solid;
 white-space: nowrap;
}

CSS：内联块与浮点数与boxsize不在同一行

5 个答案: