Textarea正在推动它左边的元素？

Question

我有以下布局:小提琴.

<div>
<div class="left">
    <div>label not aligned</div>
</div>
<div class="right">
    <div><textarea></textarea></div>
</div>
</div>
<div>
<div class="left">
    <div>label aligned</div>
</div>
<div class="right">
    <div><input></input></div>
</div>
</div>
/*...css in the fiddle*/

在其中您可以看到有2行,一行带有textarea,另一行带有输入以进行比较.如您所见,即使行高和高度与右列相同,也会向下推第一行的标签.在输入的第二行中,您可以看到我期望标签基本上居中并与右侧输入对齐的行为.即使textarea没有调整大小,也会发生这种情况.

有谁知道为什么会这样？我知道如何使用浮动左边的工作,但我想知道是否有更清洁的解决方案.提前致谢.

Answer 1

像下面一样添加vertical-align: top到您的.left班级:

.left{
    border: 1px solid black;
    vertical-align: top;
}

更新小提琴