如何将文本区域的标签对齐到顶部？

Question

我有一个数据表，如下所示：

<td>
    <label for="title">Title : </label>
    <textarea rows="5" id="title" name="title"></textarea>
</td>

标签的默认位置在底部。我该如何将标签与文本区域顶部对齐？

- Arjel

Answer 1

使用以下CSS：

​textarea { vertical-align: top; }​

• jsFiddle演示
• vertical-align在MDN上的介绍:

  vertical-align CSS属性指定内联元素或表格单元格元素的垂直对齐方式。

• CSS-Tricks上的“什么是垂直对齐？”

- kapa

---

如果您同时拥有文本区域和文本输入字段，这看起来有点不协调，因为输入字段的标签将与基线对齐；是否有一个好的CSS解决方案来对齐标签的基线和文本区域内容的第一行？ - ysth

如果你使用 vertical-align 属性（它也接受长度和百分比值），你可以接近这个效果：http://jsfiddle.net/aMLFE/95/ （这只是一个例子，具体效果可能取决于你的样式）。我在 Chrome、FF 和 IE11 中尝试过。 - kapa

我晚了5年，但是你可以将line-height与vertical-align: top结合使用。 - Aximili

Answer 2

@Bazmegakapa 很棒的回答！我们也可以这样做

label{display:block; float:left;}​

Fiddle演示：http://jsfiddle.net/kaMqg/1/

- SVS

---

是的，但浮点数有很多副作用。 - kapa

Answer 3

使用 br 标签。

<td>
    <label for="title">Title : </label>
    <br>
    <textarea rows="5" id="title" name="title"></textarea>
</td>

- Kiur Jullis

---

这将使文本区域处于新行，而不是预期的结果（请检查被接受的答案）。 - Temani Afif