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

Question

为什么第一个元素在其子元素包含文本时被推下？为什么内联块的行为如此？

而我怎样才能让他们并排边让他们有孩子？我想的灰色框有一个元素在另一个的上面的列表，同时还具有一切这样的排列（如框不包含儿童正常工作）：

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

.box { 
display: inline-block; 
} 

Answer 1

简单修复。添加overflow:hidden。

这将强制元素包含文本。

.box { 
    overflow:hidden; 
} 

Working jsFiddle demo

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

.box { 
    vertical-align:top; 
} 

Working jsFiddle demo

这是发生的原因，是因为inline-block元素的默认垂直取向是baseline。因此，它是在底部的原因。