把 中的 设置为 display: block，就能很自然地实现“标签文字在上、输入框在下”的表单布局。这样无需把标签和输入框拆分开来，既能保留清晰的 HTML 语义结构，也让 CSS 样式控制更简单、更规范。

通过给 `` 内部的 `` 添加 `display: block`，可以轻松实现标签文本显示在输入框正上方的效果。这种写法不需要拆开 label 和 input，既符合语义化 HTML 的最佳实践，也方便后续表单样式优化。

在 HTML 表单开发中，使用包裹式 （即让 直接包裹 ）通常是更推荐的语义化写法。原因很直接：它可以天然地将表单控件与提示文字关联起来，对可访问性更友好，例如屏幕阅读器能够更准确地识别两者关系；同时，这种结构更紧凑，代码也更整洁。不过需要注意的是，默认情况下， 属于内联级元素，因此通常会与标签文字显示在同一行：

用户名：

这时标签文字和输入框会横向排列，不符合常见的“表单标签在上、输入框在下”的布局习惯，也不利于提升表单可读性。

✅ 最简单且有效的解决方案是：只添加一条 CSS 规则，让 独占一行：

label input {
display: block;
margin-top: 4px; /* 可选：增加标签与输入框之间的垂直间距 */
}

完整示例如下：

邮箱地址：



密码：

⚠️ 注意事项：

• 不要在给 设置 display: block 后，再叠加 float、inline-block 等复杂布局方式——这样反而可能影响正常的文档流和语义表现；相比之下，label input { display: block } 才是最轻量、最稳定的实现方式；
• 如果需要兼容旧版 IE（例如 IE8），display: block 的兼容性也非常好，通常不需要做额外兼容处理；
• 尽量避免在 内混入过多其他标签元素，例如 、
等，以免影响表单可访问性和结构清晰度；“纯文本 + 单个表单控件”通常是更稳妥的组合。

总结：在包裹式 label 中让 input 另起一行，本质上只需一行 CSS。坚持语义优先、样式从简，不但能实现专业的表单布局，还能兼顾可维护性、可访问性以及搜索引擎更容易理解的结构化内容。