直接用display: flex最稳，但必须每组label+input单独包裹（如.form-group），设flex+align-items:center+gap；label用flex:0 0 120px右对齐，input等控件用flex:1+box-sizing:border-box；禁用float/absolute；多列推荐grid；移动端需允许缩放并统一width:100%；form默认margin须重置为0。

label 和 input 怎么并排对齐才不踩坑

直接用 display: flex 最稳，但必须包裹每组 label + input，不能只给整个 form 设 flex——否则所有元素会挤成一行，破坏语义流。

• 每组用 <div class="form-group"> 包起来，再设 <code>display: flex; align-items: center; gap: 8px
• label 加 flex: 0 0 120px（固定宽度+不缩放），text-align: right 保证文字右对齐
• input、select、textarea 统一设 flex: 1; box-sizing: border-box，避免 padding 撑宽
• 别给 label 设 float 或 position: absolute，尤其在 flex 容器里，float 会被忽略且触发怪异渲染

多列表单用 Grid 还是 Flex

两列左右并排（比如「姓名」+「邮箱」同行）用 grid 更清晰；三列以上或需要跨行（如 textarea 占两行）时，grid 是唯一靠谱选择。


anything-to-html
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
下载
• 父容器设 display: grid; grid-template-columns: 120px 1fr 120px 1fr，显式定义标签列和控件列交替
• 每个 label 设 grid-column: 1，对应 input 设 grid-column: 2，顺序不会错乱
• 提交按钮要横跨整行？加 grid-column: 1 / -1，比写 colspan 干净得多
• Flex 在二维布局里容易失控——比如想让第3个 input 换行，得插空 div 或用 flex-wrap 配合 min-width，反而难维护

移动端表单怎么避免缩放错位

关键不是“禁用缩放”，而是让表单元素本身能随视口缩放而保持比例——否则用户双指放大后，input 可能被切掉一半。

• 删掉 <meta name="viewport" content="user-scalable=no">，允许缩放是可访问性底线
• 所有表单控件统一用 width: 100%（不是 px 或 rem），配合 box-sizing: border-box
• label 文字用 rem，但别小于 0.875rem（约 14px），否则 iOS Safari 会强制放大文本破坏布局
• 测试时真机双指缩放，重点看 select 下拉箭头是否被裁、textarea 是否撑破容器

为什么 form 默认有 margin 会导致布局偏移

几乎所有浏览器都给 form 设了默认 margin-top 和 margin-bottom（Chrome 是 0.67em，Firefox 略小），但这个 margin 会和相邻块级元素发生折叠，导致实际间距不可控。

• 第一行代码就该写 form { margin: 0; }，别等出问题再查
• 如果用了 CSS Reset（如 normalize.css），确认它是否覆盖了 form 的 margin ——有些版本漏掉了
• 用开发者工具选中 form，看右侧 “Computed” 里的 margin 值，若显示 0.67em 就是它在捣鬼
• 特别注意：这个 margin 不影响内部子元素对齐，只影响 form 自身在文档流中的位置，所以常被误判为“label 没对齐”
表单对齐看着简单，真正卡住人的往往是盒模型细节和浏览器默认行为的叠加效应。改完样式后，务必在 Chrome、Safari 和 Edge 里分别用设备模拟器点开表单，手动输入再删除一次——光看静态渲染，发现不了 input 聚焦时边框变宽导致的换行错位。