Textarea 是把元素往下推到左边吗？答案

【问题标题】：Textarea is pushing down the element to the left of it?Textarea 是把元素往下推到左边吗？
【发布时间】：2013-09-30 15:22:21
【问题描述】：

我有以下布局：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 让它工作，但我想知道是否有更清洁的解决方案。提前致谢。

【问题讨论】：

标签： html css textarea alignment

【解决方案1】：

将vertical-align: top 添加到您的.left 类中，如下所示：

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

Updated Fiddle

【讨论】：

天啊，我已经有一段时间没那么用力地捂脸了。谢谢你，先生。
@gwtter：每个人都会遇到，所以不用担心 :) 这个fiddle 更具说明性。 vertical-align 的默认值为 baseline。