html - div 元素在包含文本时被下推。内联块的一种特殊行为

Question

当子元素包含文本时，为什么第一个元素会被下推？为什么 inline-block 的行为是这样的？

以及如何在允许他们生孩子的同时并排排列 div？我希望灰色框有一个元素列表，一个在另一个之上，同时仍然像这样对齐所有内容（如果框不包含子元素，它可以正常工作）：

示例在这里：http://jsfiddle.net/uwRwM/1/

.box {
display: inline-block;
}

Answer 1

轻松修复。添加overflow:hidden.

这将强制元素包含文本。

.box {
    overflow:hidden;
}

工作 jsFiddle 演示

或者，您可以设置vertical-align:top.

.box {
    vertical-align:top;
}

工作 jsFiddle 演示

发生这种情况的原因是因为inline-block元素的默认垂直对齐方式是baseline. 因此它是在底部的原因。