HTML/CSS新手求助：如何将文本框标题置于textarea左上角

嘿，我来帮你搞定这个小布局问题！你遇到的情况是因为 <textarea> 默认属于行内块元素，浏览器会自动把它和文本的基线对齐，所以"Notes:"就跑到文本框底部去了。下面给你几个简单直接的修复方案：

方案1：调整垂直对齐属性（快速修复） #

直接给textarea加个vertical-align: top样式，就能让文字和文本框顶部对齐，代码修改后是这样：

Notes: <textarea name="patientNotes" style="width: 250px; height: 100px; vertical-align: top; padding: 0.4em; text-align: left;"> </textarea>

我还把你的padding简化成了 shorthand写法，看起来更整洁，效果和原来的padding设置是一样的～

方案2：用容器包裹（更规范的做法） #

如果想让布局更清晰，同时提升页面的可访问性，推荐用<label>标签关联标题和文本框，再用flex容器包裹：

<div style="display: flex; align-items: flex-start; gap: 8px;">
  <label for="patientNotes">Notes:</label>
  <textarea id="patientNotes" name="patientNotes" style="width: 250px; height: 100px; padding: 0.4em;"></textarea>
</div>

用flex布局后，标题会自动和文本框顶部对齐，而且点击"Notes:"就能直接聚焦到文本框，用户体验也更好。

方案3：把标题设为块元素（适合单独占行的场景） #

如果不需要标题和文本框在同一行，也可以给"Notes:"加个<span>并设置成块元素，让它单独占一行：

<span style="display: block;">Notes:</span>
<textarea name="patientNotes" style="width: 250px; height: 100px; padding: 0.4em;"> </textarea>

你可以根据自己的布局需求选其中一个方案，最推荐方案2，既解决问题又更规范～

内容的提问来源于stack exchange，提问作者lenhe