label 和 input 默认为 inline 元素，同处一行是规范行为；实现上下排列需避免 inline 布局，推荐用 flex（设 flex-direction: column + gap）或 grid（配合媒体查询响应式切换），并用 div 包裹保障语义与无障碍。
label 和 input 默认就是上下排列的，但很多人误用了 display
浏览器默认把 label 和 input 都当作 inline 元素，所以写成 <label>姓名</label><input type="text"> 时，它们会挤在同一行——这不是“没排好”，而是符合规范的默认行为。真正想实现上下排列，核心不是“怎么排”，而是“别让它们 inline”。
常见错误是给 label 加 display: block 就以为完事了，结果发现 input 还是贴着 label 右边跑。这是因为 input 仍是 inline 或 inline-block，默认会紧跟在 block 元素后面（如果没换行符或其它阻断）。
- 最稳妥的做法：给
input也加display: block，或者统一用display: flex/display: grid容器控制 - 更推荐语义化写法：把
input包进label里，此时label是 block，内部input自然独占一行（前提是没额外设 inline 样式） - 注意：若用
for+id关联方式，label和input是分离的，必须靠 CSS 控制布局；若用嵌套方式，for和id可省略，且点击 label 任意区域都能聚焦 input
用 flex 布局精准控制上下间距和对齐
单纯靠 display: block 虽能上下排，但 label 文字左对齐、input 左对齐、中间空隙难调。Flex 是目前最可控的方案，尤其适合表单字段较多的场景。
关键点在于：容器设 display: flex + flex-direction: column，再用 gap 控制间距，比反复调 margin 更干净。
立即学习“前端免费学习笔记（深入）”；
- label 默认是 block，但 flex 容器里它会变成 flex item，文字对齐需显式设
align-self: flex-start（否则可能受容器align-items影响） - input 在 flex 容器中默认 stretch，常导致宽度撑满，加
align-self: flex-start可让它恢复“内容宽度” - 不要对 label 或 input 单独设 width，应在容器上用
width或max-width统一约束
<div style="display: flex; flex-direction: column; gap: 8px;"> <label>邮箱</label> <input type="email" style="align-self: flex-start;"> </div>
用 grid 实现响应式上下排列（适配移动端）
当表单需要在小屏上下排列、大屏左右排列时，grid 比 float 或 media query 嵌套更简洁。关键是利用 grid-template-areas 或 grid-auto-flow 动态切换。
常见误区是只写一套 grid 模板，结果小屏也被强制两列。正确做法是用 @media 切换 grid-template-columns，同时保持 item 顺序不变。
- label 和 input 必须同级（不能嵌套），否则 grid 无法分别控制两个元素
- 用
grid-column: 1 / -1强制 label 占满整行，input 默认也占满，这样小屏自然上下 - 大屏下设
grid-template-columns: max-content 1fr，再用grid-column指定位置，label 在左、input 在右 - 注意：IE 不支持
gap，如需兼容需回退到margin
为什么用 div 包裹比直接写 label+input 更可靠
很多人图省事写 <label>用户名</label><input>，但这样容易出问题：HTML 解析时若中间有空格或换行，可能产生空白文本节点，影响 flex/grid 布局；另外，无障碍阅读器对无明确父子关系的 label+input 支持不稳定。
- 包裹用
div或fieldset是最佳实践，既隔离样式作用域，又明确语义分组 - 避免用
p包裹，因为p不允许嵌套input（HTML5 中虽不报错，但校验失败） - 如果用 CSS 框架（如 Bootstrap），优先用其 form-group 类，而不是自己重写 display 规则——框架已处理好 focus 状态、禁用态、验证反馈等细节
- 最后提醒：无论怎么排，
label的for属性和input的id必须严格一致，否则点击 label 无法聚焦，这是最容易被忽略的可访问性硬伤
