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

Question

为什么第一个元素在其子元素包含文本时被下推？为什么内联 block 会这样？

我怎样才能在允许 div 有 child 的同时并排对齐 div？我希望灰色框有一个元素列表，一个在另一个之上，同时仍然像这样对齐所有元素(如果框不包含子项，它工作正常):

The example is here: http://jsfiddle.net/uwRwM/1/

.box {
display: inline-block;
}

Answer 1

轻松修复。添加溢出:隐藏。

这将强制元素包含文本。

.box {
    overflow:hidden;
}

Working jsFiddle demo

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

.box {
    vertical-align:top;
}

Working jsFiddle demo

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