与基线和文本区域垂直对齐

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">test</textarea>
</div>

结果标签与文本区域的底部对齐。我希望它与该区域的first行对齐。

谢谢。

Answer 1

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

Answer 2

[您需要将label div放在与文本区域相同的div内，然后，如果要将其设置为textarea的顶部，则需要的是vertical-align: top，而不是[ C0]。

Answer 3