我试图将几个元素排成一行,以便它们都适合容器的宽度。为了防止它们自动换行,我向父级添加了“white-space: nowrap”,并向子级添加了“white-space: normal”以允许它们对文本进行换行(根据需要)。
问题是,使用这种配置,最右边的子节点有时会超过父节点的宽度。
HTML:
<div id="container">
<div class="child">
child 1
</div>
<div class="child">
child 2 text that might be long enough to wrap, but still exceed the parent
</div>
</div>
CSS:
#container {
white-space: nowrap;
width: 200px;
background: yellow;
border: 1px solid brown;
padding: 5px;
}
.child {
display: inline-block;
border: 2px solid red;
vertical-align: top;
white-space: normal;
}
http://jsfiddle.net/7e5TU/1/ (如果问题没有立即出现,请更改文本的长度)。
我知道我可以用一个表来解决它,并且可能在左边的 child 上有一个 float ,在右边有一个“溢出:隐藏”,但我看不出为什么这不起作用。
谁能提供一些见解?我最想了解盒子模型中的什么导致了这种行为。谢谢!
最佳答案
我同意@hashem 那是预期的行为。通过对父级使用 white-space: nowrap;
,您已经折叠了 inline(-block)
元素之间的空白。 white-space
处理子元素,而不是元素本身。
好吧,如果您仍然需要修复,您可以将 width
添加到第二个 child 以使其适合 container
。
例如
.child2
{
width: 70%;
}
关于html - 具有 "white-space: normal"的内联 block div 超出具有 "white-space: nowrap"的父级的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22126789/