我有一些非常基本的 HTML/CSS 无法正常工作。基本上我的 body 设置为 400 像素宽。然后我在主体内部有两个 div，其显式宽度分别为 300 像素和 100 像素。此外，这两个 div 都设置为 display: inline-block。由于某种原因，100px 的 div 超出了主体的内容区域并出现在其下方。我不知道为什么会这样。如果我将宽度设置为 100px 到 96px，它就可以工作。但是，如果我将其设置为 97px、98px、99px 或设置回 100px，则不起作用。我觉得这种行为很奇怪。谁能解释一下出了什么问题？
请注意，我正在 Chrome(Beta channel )上对此进行测试。代码如下。
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>
最佳答案
这是因为 white-space 在 html 中的折叠方式。
如果您删除两个 div 元素之间的换行符，一切都很好:
<div class="list-container">
</div><div class="button-container">
</div>
您也可以只注释掉 div 之间的内容:
<div class="list-container">
</div><!--
--><div class="button-container">
</div>
或者甚至将 body 元素的 font-size 设置为零(但您必须为子元素重新定义它，显然:
body {
margin: 4px;
width: 400px;
height: 250px;
border: 1px solid black;
padding: 0;
font-size: 0;
}
关于html - 行内 block 元素似乎无缘无故地换行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6284894/