Flex比Grid更轻量可控，适合label+input双栏对齐；table仅限IE8–10兼容场景，现代项目使用会引发语义错误与响应式失效。
直接用 display: flex 做表单双栏，比 Grid 更轻量、更可控，尤其适合 label + input 这类左右配对结构；table 仅在必须兼容 IE8–10 的老系统里才考虑，现代项目中用它做表单布局等于主动引入语义错误和响应式断点失效。
label 和 input 怎么左右对齐不偏移
常见现象是 label 左侧文字“对齐了”，但 input 框右边边缘参差不齐，甚至竖线错位。根本原因不是样式没写全，而是没切断 flex 容器内子元素的默认最小宽度约束。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 父容器必须设
display: flex，且每个表单项（<div class="form-row">）为一个 flex item <li>label 元素加 <code>flex: 0 0 120px（固定宽），input 加flex: 1; min-width: 0——漏掉min-width: 0会导致长 placeholder 或 URL 文本撑破容器 - 避免用
width: 70%这类百分比控制 input，它在 flex 下行为不可控；也不要用float，会脱离文档流导致后续元素错位 - 所有 input 必须有
box-sizing: border-box，否则 padding 会让实际宽度超出预期 - 媒体查询内改
flex-direction: column同时，必须给 label 加margin-bottom: 0.5rem，input 加margin-bottom: 1rem - 不要用
width: 100%强制 input 满宽——它在 flex 容器里默认就占满剩余空间，重复设置反而干扰计算 - 如果 label 文字很长（比如“用户实名认证手机号绑定状态”），加
white-space: normal; word-break: break-word防止换行异常 - 真要用
<table>（比如 legacy 系统迁移），必须配 <code>table-layout: fixed+ 显式<colgroup></colgroup>+width百分比 <thead> 和 <code><tbody> 必须显式包裹，否则 Safari 在 <code>overflow-x: auto下无法固定表头- 每列都得有
<col>，漏一列，那一列就回退到内容驱动宽度，破坏整体比例 - 移动端完全没法靠 media query 切单栏——
display: table-cell不响应 flex 或 grid 的断点规则，只能 JS 动态替换 DOM 结构
响应式下怎么切单栏
小屏时 label 和 input 叠在一起更易操作，但很多人只加 flex-direction: column，结果 label 和 input 之间没间距、文字挤成一团。
为什么 <table> 表单在 Safari 和安卓 WebView 里经常错位
<p>不是代码写错了，是浏览器对 <code>table-layout: auto 的实现差异放大了结构脆弱性。哪怕只有一行用了 colspan="2"，整张表的列宽重算逻辑就会切换，导致左右列宽比例崩塌。
立即学习“前端免费学习笔记（深入）”；
最常被忽略的是：label 和 input 的 vertical alignment 并不天然一致。哪怕写了 align-items: center，input 的 border、font-size、line-height 和 label 不匹配，视觉上还是歪的。调的时候别只盯 margin，先统一基础排版属性。
