通过为 label 内的 input 元素设置 display: block，即可让包裹在 中的 自动换行，使标签文字自然位于输入框上方，无需拆分标签与控件结构。

通过为 label 内的 input 元素设置 `display: block`，即可让包裹在 `` 中的 `` 自动换行，使标签文字自然位于输入框上方，无需拆分标签与控件结构。

在 HTML 表单中，使用包裹式 <label></label>（即 <label><span>Label</span><input></label>）是一种语义清晰、可访问性良好的写法——它天然绑定控件，无需 for 和 id 配对，且点击标签任意区域均可聚焦输入框。但默认情况下，<input> 是内联元素，会与标签文本并排显示。

只需一条简洁的 CSS 规则即可解决布局问题：

label input {
  display: block;
  margin-top: 0.25em; /* 可选：增加标签与输入框间距，提升可读性 */
}

配合如下 HTML 结构：

<label>
  用户姓名：
  <input type="text" name="name"></label>
<label>
  电子邮箱：
  <input type="email" name="email"></label>

渲染效果即为：每行先显示标签文字，下方紧随对应输入框，视觉清晰、语义完整、无障碍友好（屏幕阅读器仍能正确关联标签与控件）。

⚠️ 注意事项：

• 避免对整个 label 设置 display: block（如 label { display: block; }），虽也能实现换行，但可能意外影响其他子元素（如 <span></span> 或图标）的布局；精准作用于 label input 更安全可控。
• 若需支持旧版 IE（
• 如需进一步美化，可为 label 添加 font-weight: bold 或 margin-bottom: 0.75em 实现更专业的表单节奏感。

这一方法轻量、标准、高效，是语义化表单布局的推荐实践。