内联块div的大空空间

Question

我试图通过使用内联块并排放置两个div。出于某种原因，我看到其中一个div有一个很大的空白空间。

我在http://codepen.io/weima/pen/eKEbD

创建了一支笔

有问题的div是具有类.input-area的div。如果我从.input-area css中删除display:inline-block，那么空的空间就消失了，但是我不能将这两个div放在一起。

有没有使用float来解决这个问题？

Answer 1

您可以向该元素添加vertical-align:top以修复对齐问题。

UPDATED EXAMPLE HERE

.input-area {
    vertical-align: top;
    display: inline-block;
    width: 450px;
    border: 1px solid green;
}

vertical-align属性的默认值为baseline。如果您对此有何好奇，请查看this answer。