直接用Flexbox+语义化+媒体查询可覆盖95%响应式表单场景；Grid虽强但Safari旧版兼容差；table语义错误、小屏错位、维护成本高，不推荐用于表单布局。
直接用 Flexbox + 语义化 <form></form> + 媒体查询，就能覆盖 95% 的真实场景。Grid 虽强，但 Safari 旧版本兼容差；float 和 inline-block 在响应式断点下极易错位或留白，不推荐。
为什么不用 table 布局表单
不是不能写，是代价太高：
<table> 语义错误：屏幕阅读器会把登录表单当成二维数据表读出，影响无障碍体验<li>小屏下 <code>colspan不会自动折叠，必须每个断点手动重写样式，稍有遗漏就整行错位- 新增字段时要反复调整
tr/td结构、border-collapse、垂直对齐，维护成本指数级上升 - 所有
.form-group默认设为flex: 0 0 100%，强制占满一行（手机态） - @media (min-width: 768px) 下改为
flex: 0 0 calc(50% - 8px)，配合父容器gap: 16px防贴边 -
<label></label>必须加display: block，否则在 flex 容器中可能被压扁或换行异常 -
<input>/<textarea></textarea>统一设width: 100%，避免因默认min-width: auto撑开布局 - 错误提示用
position: absolute+top: 100%脱离文档流，但需确保父级.form-group有position: relative - 切换提示时禁用
visibility: hidden（它仍占位），改用display: none或opacity: 0; height: 0; overflow: hidden
Flexbox 实现移动端堆叠 → 平板/桌面端两列的关键控制点
核心不是“怎么排成两列”，而是“怎么让两列在窄屏下自动退化为单列”。关键 CSS 如下：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
错误提示插入后布局错乱怎么办
这不是 JS 错了，是 CSS 流式布局的自然反应：错误 <div class="error"> 插入后高度突增，挤偏相邻项。解决方式有三选一：<ul>
<li>给 <code>.form-group 加 min-height: 64px（按字体大小和行高预估），预留提示空间
最易被忽略的是：不要在 <input> 上直接加 margin-bottom 来“撑开”错误区——这会让正常态也多出空白，破坏视觉节奏。真正的解法永远在容器层，不在输入控件本身。
