css - 标签旁边带有填充垂直对齐顶部的文本区域

Question

当我向文本区域添加填充时，vertical-align top 不起作用。

浏览器:火狐

CSS:

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

textarea {
    padding: 6px 12px;
}

我正在寻找这样的结果，但在 textarea 中添加了填充:

这让我发疯它应该很简单 :-)

Answer 1

您需要使用 div 将标签与文本区域分开。

<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/