内联块div的大空空间

Question

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

我在http://codepen.io/weima/pen/eKEbD创建了一支笔

有问题的div是具有类.input-area的div.如果我display:inline-block从.input-area css中移除空的空间,那么我将无法将这两个div并排放置.

反正有没有使用float？

Answer 1

您可以添加vertical-align:top到元素以修复对齐问题.

这里有更新的例子

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

vertical-align属性的默认值是baseline.如果您对此有何好奇,请看一下这个答案.