通过为 label input 设置 display: block，可轻松让包裹在 内的 元素独占一行，从而自然实现 label 文本居上、输入框居下的垂直排列。
通过为 `label input` 设置 `display: block`，可轻松让包裹在 `
在 HTML 表单中，将 <input> 直接嵌套在 <label></label> 内（即“包裹式标签”）是一种语义清晰、无障碍友好的写法，既省去 for 和 id 的配对，又确保点击文本即可聚焦输入框。但默认情况下，<input> 是内联元素，会与 label 文本同行显示：
<label> 用户姓名： <input type="text"></label>
此时文本和输入框会并排出现，不符合“标签在上、输入框在下”的常见表单设计规范。
解决方案非常简洁：
只需一条 CSS 规则，强制嵌套在 <label></label> 中的 <input> 变为块级元素：
label input {
display: block;
}
完整示例：
<style>
label {
display: block; /* 确保 label 自身块级化（非必需，但推荐） */
margin-bottom: 8px; /* 增加上下间距，提升可读性 */
font-weight: bold;
}
label input {
display: block; /* 关键：使 input 换行显示 */
width: 100%; /* 可选：拉宽输入框以匹配容器 */
padding: 6px;
border: 1px solid #ccc;
border-radius: 4px;
}
</style><label>
电子邮箱：
<input type="email" name="email"></label>
<label>
密码：
<input type="password" name="password"></label>
✅ 优势说明：
- 语义正确：
<label></label>包裹<input>天然绑定，无需id/for，屏幕阅读器自动识别； - 样式可控：
display: block是最轻量、兼容性极佳（支持所有现代浏览器及 IE9+）的方案； - 易于扩展：可进一步添加
margin-top、font-size或line-height精细控制垂直间距。
⚠️ 注意事项：
- 避免对
label设置display: flex或inline-flex后未重置input的 display，否则可能破坏换行效果； - 若 label 内含多元素（如图标、必填星号），建议用
<span></span>包裹纯文本，并配合display: block或flex-direction: column进行更复杂布局； - 不要误写为
label > input（子选择器），虽然在此场景下效果相同，但label input（后代选择器）更稳妥，兼容未来可能的嵌套结构。
综上，无需 JavaScript、不依赖额外 DOM 结构，仅靠一行 CSS 即可优雅实现包裹式 label 的垂直布局——简洁、标准、健壮。
