内联块元素是线破坏似乎没有理由？ [英] inline-block elements are line breaking for seemingly no reason?
问题描述
我有一些非常基本的HTML / CSS不能正常工作。基本上我有我的身体设置为400px宽。然后我有两个内部的身体与显式宽度为300px和100px的div。此外，这两个div都设置为 display：inline-block 。由于某些原因，100px的div突破了body的内容区域，并出现在它的下面。我不知道为什么会发生这种情况。如果我将宽度从100px设置为96px，它的工作原理。但是，如果我将它设置为97px，98px，99px或回到100px，它不工作。我发现这种行为很奇怪。有人可以解释发生了什么问题吗？
I have some pretty basic HTML/CSS that isn't working as I expect. Basically I have my body setup to be 400px wide. I then have two divs inside of the body with explicit widths of 300px and 100px. Additionally, both of these divs are set to display: inline-block. For some reason, the 100px div breaks out of the body's content area and appears below it. I don't know why this is happening. If I set the width from 100px to 96px, it works. However, if I set it to 97px, 98px, 99px, or back to 100px, it doesn't work. I find this behavior very odd. Can someone explain what is going wrong?
请注意，我正在Chrome（测试版）上测试此功能。代码如下。
Note that I am testing this on Chrome (Beta Channel). Code is below.
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>
推荐答案
如果你从两个 div 元素，一切正常：
If you remove the line-breaks from between the two div elements, everything's fine:
<div class="list-container">
</div><div class="button-container">
</div>
您也可以注释掉 div s：
<div class="list-container">
</div><!--
--><div class="button-container">
</div>
或者将 font-size $ c> body 元素（但是你必须为子元素重新定义它：
Or even set the font-size to zero for the body element (but you'll have to redefine it for the child elements, obviously:
body {
margin: 4px;
width: 400px;
height: 250px;
border: 1px solid black;
padding: 0;
font-size: 0;
}
这篇关于内联块元素是线破坏似乎没有理由？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
