Question

我正在尝试在文本区域中找到与第一行文字的基线对齐的标签。

天真的尝试：

<div style="vertical-align: baseline; display: inline-block">
   <label for="comments">Comments:</label>
</div>
<div style="vertical-align: baseline; display: inline-block">
   <textarea name="comments" id="comments"></textarea>
</div>

导致标签与文本区域的底部对齐。我宁愿让它与该地区的第一个行排成一行。

感谢。

Answer 1

问题是textarea被视为一个块，就像一个图像。在进行垂直对齐时，它使用边框来确定放置而不是文本。在下面的示例中，您可以看到标签和div的位置基于内部文本，其中textarea的行为与图像类似。

http://jsfiddle.net/kenearley/nGaQs/3/

我认为让标签和textarea按照你想要的方式对齐的唯一方法是做一个vertical-align：top，然后确保你的字体大小和行高比正确匹配。

Answer 2

您需要将label div置于与文本区域相同的div内，然后，如果您希望将其设置为textarea您的顶部重新寻找vertical-align: top，而不是baseline。

此处查看和示例：
http://jsfiddle.net/anhus/

Answer 3

label {
  display: flex;
  align-items: baseline;
}

<label>
  Comments: <textarea></textarea>
</label>
<hr>

垂直对齐基线和textareas

3 个答案: