只要给 label 内部的 input 元素添加 display: block，就能让包裹在 中的 自动换到下一行，从而实现表单标签文字显示在输入框上方，无需拆分 label 与表单控件的结构。

通过为 label 内的 input 元素设置 `display: block`，即可让包裹在 `` 中的 `` 自动换行，让表单标签文字自然显示在输入框上方，无需拆分标签与控件结构。这是一种常见且实用的 CSS 表单布局技巧。

在 HTML 表单开发中，使用包裹式 （即 Label）通常是更简洁规范的写法：不仅语义清晰，而且可访问性表现更好。它能让表单控件与标签天然关联，无需额外通过 for 和 id 进行绑定，同时用户点击标签中的任意区域时，也可以直接让输入框获得焦点。不过需要注意的是，默认情况下， 属于行内级显示特性，因此往往会和标签文字排在同一行。

想让 label 文字在上、input 输入框在下，只需添加一条简单的 CSS 规则即可：

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

配合如下 HTML 结构：

用户姓名：



电子邮箱：

最终渲染效果就是：每一行先显示表单标签文字，下方紧接对应的输入框。这样不仅层次更清楚、阅读更直观，也能保持完整语义与良好的无障碍支持，屏幕阅读器依然可以正确识别并关联标签和表单控件。

⚠️ 注意事项：

• 尽量不要直接对整个 label 设置 display: block（例如 label { display: block; }）。虽然同样可以实现换行，但也可能影响其他子元素，例如 、图标或辅助说明文字的布局。将样式精确作用于 label input，通常更稳妥也更易维护。
• 如果需要兼容旧版 IE（<11），这种写法同样可以正常使用；在现代浏览器环境下也不存在兼容性问题，适合作为常规表单样式方案。
• 若想进一步优化表单视觉效果，还可以为 label 增加 font-weight: bold，或者设置 margin-bottom: 0.75em，从而让表单排版更清晰、更专业。

总体来说，这种通过 CSS 控制包裹式 label 内 input 换行的方法轻量、标准且高效，是实现语义化表单布局、让标签显示在输入框上方的推荐做法。