Textarea带有填充垂直对齐顶部标签旁边

Question

当我向textarea添加填充时，vertical-align top不起作用。

浏览器：Firefox

CSS：

.form-aligned textarea-label {
    vertical-align: top;
    display: inline-block;
    width: 120px;
    text-align: left;
}

textarea {
    padding: 6px 12px;
}

我正在寻找这样的结果，但填充添加到textarea：

它让我发疯，应该很简单： - ）

Answer 1

您需要使用div来将标签与textarea分开。

<div style="float:left;">
<label>Incident: </label>
</div>
<div style="float:left;">
<textarea id="txtIncident"></textarea>
</div>

label {
    vertical-align: top;
    width: 120px;
    text-align: left;
}

textarea {
    padding: 6px 12px;
}

https://jsfiddle.net/7z0uwtLu/