inline-block 元素似乎无缘无故地换行？答案

【问题标题】：inline-block elements are line breaking for seemingly no reason?inline-block 元素似乎无缘无故地换行？
【发布时间】：2014-08-03 14:14:01
【问题描述】：

我有一些非常基本的 HTML/CSS 无法正常工作。基本上我的身体设置为 400px 宽。然后我在主体内部有两个 div，显式宽度分别为 300px 和 100px。此外，这两个 div 都设置为 display: inline-block。出于某种原因，100px 的 div 突破了 body 的内容区域并出现在它的下方。我不知道为什么会这样。如果我将宽度从 100px 设置为 96px，它就可以工作。但是，如果我将它设置为 97px、98px、99px 或回到 100px，它就不起作用了。我觉得这种行为很奇怪。有人可以解释发生了什么问题吗？

请注意，我正在 Chrome（Beta 频道）上对此进行测试。代码如下。

CSS：

body {
    margin: 4px;
    width: 400px;
    height: 250px;
    border: 1px solid black;
}

.list-container {
    display: inline-block;
    width: 300px;
    height: 100%;
    background-color: red;
}

.button-container {
    display: inline-block;
    width: 100px;
    height: 100%;
    background-color: blue;
}

HTML：

<body>

<div class="list-container">
</div>

<div class="button-container">
</div>

</body>

【问题讨论】：

您是否尝试过为这两个元素设置margin: 0; padding: 0？他们有borders 设置吗？
@David：我检查了 chrome 开发人员工具，但我没有看到任何这些 Div 的任何填充、边框或边距。此外，最终计算的 CSS 似乎没有包含任何意外内容。
虽然这可能无法解决您的问题，但更常见的是看到这两个元素浮动而不是使用 inline-block 定位。

标签： html google-chrome css

【解决方案1】：

这是因为white-space 在 html 中的折叠方式。

如果您从两个 div 元素之间删除换行符，一切都很好：

<div class="list-container">
</div><div class="button-container">
</div>

JS Fiddle demo.

您也可以在divs 之间注释掉：

<div class="list-container">
</div><!--

--><div class="button-container">
</div>

JS Fiddle demo.

或者甚至将body 元素的font-size 设置为零（但显然，您必须为子元素重新定义它：

body {
    margin: 4px;
    width: 400px;
    height: 250px;
    border: 1px solid black;
    padding: 0;
    font-size: 0;
}

JS Fiddle demo.

【讨论】：

令人着迷 - 我从来不知道会发生这种情况，并且一直在明显错误地认为空白被忽略了。很高兴知道。
display: block 元素之间的空白基本上折叠成空。但在 inline 和 inline-block 元素之间，它会折叠成一个空白字符。
这是很好的信息，谢谢。我将改用浮点数，因为我不知道内联块在后面这么痛苦:)
你的 JS Fiddle 演示给了我我需要的东西：inline-block;谢谢。

【解决方案2】：

Chrome 中 inline-block 奇怪行为的另一种可能性是，如果您设置了 text-render: optimizeLegibility。我在 Chrome 中的内联块元素中遇到莫名其妙的换行符，发现删除 text-render: optimizeLegibility 解决了这个问题。

过去我至少遇到过one other 难以解决的问题（无法解释的网络字体无法渲染），这在过去是由optimizeLegibility 引起的，所以从现在开始当 Chrome 中出现异常行为时，请成为主要嫌疑人。

（nb。即使您认为自己没有使用它，但如果您使用的是 Twitter Bootstrap 之类的框架，您可能会在不知不觉中使用它）

【讨论】：

这是我在安卓平板电脑上出现问题的原因

【解决方案3】：

这是你身体的边缘：

margin: 4px;

因为边距算作总宽度的一部分。第一个 300 像素 + 第二个 div 100 像素 + 8 像素（两边各 4 个）边距 = 408 像素。这迫使第二个 div 下降到下一行。

我实际上有点惊讶它在 96 处有效。它的作用就像它只考虑了一侧的边距。我希望它只能在 92 或以下工作。无论哪种方式，都可以在您的身体宽度中考虑边距大小，或者将边距设置为 0，这应该可以解决问题。

【讨论】：

不是margin，而是white-space（或者，至少，它可能是white-space以及）...
我已经尝试去除正文中的边缘，但这对问题的症状没有影响。边距在内容区域之外，所以实际上它在这个特定场景中没有任何作用。
@Robert，请参阅我的回答和 JS Fiddle 演示。这些建议适用于 JS Fiddle，所以大概它们也会解决您的问题。