表单元素默认不对齐是因为label、input、select的display和vertical-align属性不一致：label为inline且基线对齐文字，input为inline-block且基线对齐内部文本框内容，button还自带额外padding和line-height，导致浏览器渲染时基线位置不同而视觉错位；最可靠解法是用flexbox将每组label+input包裹在.form-row容器中，设display:flex和align-items:center，并为label设flex:0 0 100px、input等设flex:1与min-width:0。

为什么表单元素默认不对齐

因为 <label></label>、<input>、<select></select> 默认 display 和 vertical-align 不一致：<label></label> 是 inline，基线对齐文字；<input type="text"> 是 inline-block，基线对齐内部文本框内容；<button></button> 还可能自带额外 padding 和 line-height。浏览器渲染时它们“看起来错位”，实际是基线位置不同 —— 不是 bug，是规范行为。

用 Flexbox 让每组 label + input 垂直居中对齐

这是目前最可靠、语义清晰、响应式友好的方式，不依赖浮动或表格 hack。

• 把每对 <label></label> 和 <input> 包进一个 <div class="form-row"> 容器里 <li>给 <code>.form-row 设 display: flex 和 align-items: center
• label 设 flex: 0 0 100px（固定宽度防换行挤压），text-align: right 可选
• input、select、textarea 统一设 flex: 1 和 min-width: 0（防止小屏下 flex item 溢出）
• 避免在 .form-row 外层再套浮动或 position: absolute，否则会破坏 flex 对齐

用 CSS Grid 实现多列标签-控件结构

适合需要两列以上、跨行控件（如 <textarea></textarea>）、或需精确控制网格轨道的场景。


Markdown to HTML
{"answer":"将 Markdown 转换为内嵌 CSS、样式精美的独立 HTML。完美适用于新闻简报、文档、报告及邮件模板。"}
下载
• 给整个表单容器设 display: grid 和 grid-template-columns: 120px 1fr
• 每个 <label></label> 加 grid-column: 1，对应 <input> 加 grid-column: 2
• 提交按钮要横跨两列，用 grid-column: 1 / -1
• 别漏掉 row-gap: 12px 替代 margin，避免嵌套 margin 折叠问题
• Grid 在 Safari 15.4+ 和 Chrome 90+ 表现稳定，IE11 需 fallback（如用 display: table）

表格布局（<table>）还能用吗 <p>能，但仅限三类场景：教学演示、内网老旧系统、必须兼容 IE8 的遗留项目。它不是错误，而是明确的权衡选择。</p> <ul><li>用 <code><table> 时，<code><tr> 天然按行组织，<code><td> 同列自动拉齐宽高，label 和 input 错位问题基本消失 <li>必须加 <code>table-layout: fixed 并为列设 width，否则列宽会随内容撑开，失去可控性

语义上 <table> 表示数据关系，不是布局工具 —— 屏幕阅读器和 SEO 工具会按数据表解析，可能影响可访问性 <li>现代项目若用 <code><table> 排版表单，务必在 aria-label 或注释里说明这是“布局表格”，避免混淆 <p>真正容易被忽略的是 vertical-align 和 line-height 的隐性干扰：哪怕用了 Flexbox，如果父容器有 <code>line-height: 2，仍可能让 <input> 往下偏移。动手前先检查祖先元素有没有意外的排版样式。