html - Textarea 是把元素往下推到左边吗？

Question

我有以下布局：fiddle。

<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 行，其中一行带有文本区域，另一行带有用于比较的输入。如您所见，即使 line-height 和 height 与右列中的相同，第一行的标签也被向下推。在带有输入的第二行中，您可以看到我所期望的行为，其中标签基本上居中并与右侧的输入对齐。即使 textarea 没有调整大小，也会发生这种情况。

有谁知道为什么会这样？我知道如何使用 float left 让它工作，但我想知道是否有更清洁的解决方案。提前致谢。

Answer 1

vertical-align: top在您的课程中添加一个，.left如下所示：

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

更新小提琴