与基线和文本区域垂直对齐
我试图让标签与文本区域中第一行文本的基线对齐。
天真的尝试：
<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>结果标签与文本区域的底部对齐。我希望它与该区域的第一线对齐。
谢谢。
I'm trying to get a label lined up with the baseline of the first line of text in a text area.
The naive attempt:
<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>results in the label being aligned with the bottom of the text area. I'd prefer to have it lined up with the first line of the area.
Thanks.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
问题在于文本区域被视为一个块，就像图像一样。进行垂直对齐时，它使用边框而不是文本来确定位置。在下面的示例中，您可以看到标签和 div 根据内部文本进行定位，其中文本区域的行为与图像类似。
http://jsfiddle.net/kenearley/nGaQs/3/
我认为唯一的方法让标签和文本区域按照您想要的方式对齐是执行垂直对齐：顶部，然后确保您的字体大小和行高比例正确匹配。
The problem is that the textarea is viewed as a block, like an image. When doing a vertical-align, it is using the border to determine placement instead of the text. In the example below, you can see that the label and div are positioned based on the text inside, where the textarea behaves like the image.
http://jsfiddle.net/kenearley/nGaQs/3/
I think the only way to get the label and textarea to align the way you want is to do a vertical-align:top, then make sure your font-size and line-height ratio match up right.
您需要将
labeldiv放在与文本区域相同的div内，然后，如果您希望将其设置为 < 的顶部code>textarea 您正在寻找vertical-align: top，而不是baseline。此处查看和示例：
http://jsfiddle.net/anhus/
You need to put the
labeldivinside of the samedivas the textarea, then, if you want it set to the top of thetextareayou're looking forvertical-align: top, notbaseline.View and example here:
http://jsfiddle.net/anhus/