input和label垂直不对齐主因是默认baseline不一致，统一设vertical-align: middle最简有效；更可靠方案是用flex布局包裹二者并设align-items: center。

input 和 label 垂直不对齐，不是样式没加对，而是默认基线（baseline）不一致导致的视觉错位——直接设 vertical-align: middle 是最简、最稳的解法。

为什么 input 和 label 默认不齐

浏览器给 input 设了 vertical-align: baseline，而 label 的文字行高和字体度量不同，基线位置天然偏下；line-height 不一致会放大这个偏差。这不是 bug，是规范行为。

• 不要依赖父容器的 line-height 传导——它对表单控件无效
• input、select、button 都要统一设 vertical-align: middle，不能只设其中一个
• 避免用 margin-top 或 padding “手动调齐”，响应式下极易失效

用 flex 包裹 label + input 更可靠

单靠 vertical-align 在复杂布局中仍有边界情况（比如多行 textarea 或含图标按钮），display: flex 是目前语义清晰、兼容性好、控制力强的首选方案。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• 每个表单项用独立 <div class="form-row"> 包裹，不共享父级 <code>flex
• .form-row { display: flex; align-items: center; gap: 0.5em; }
• label 设 flex: 0 0 auto 或固定宽，input 设 flex: 1; min-width: 0; 防止小屏溢出
• 禁用 float —— 它会让 align-items 失效

input 和 button 并排时底部下沉怎么办

典型现象：<input type="search"> 和 <button></button> 同行后 button 明显更低。根源是 button 默认有 border、padding 和隐式 line-height，而 input 没有。

• 统一重置：对两者都设 all: unset;，再显式定义 border、padding、height
• 强制高度一致：height: 36px; 比 line-height 更可控（尤其在 Windows Chrome 下）
• vertical-align: top 比 middle 在某些旧版 Safari 中更稳定
• 避免混用单位：padding: 8px 和 font-size: 0.875rem 组合容易因渲染精度误差错位

真正难的不是写对某一行 CSS，而是意识到：表单对齐问题本质是基线系统与盒模型的叠加效应。哪怕只改一个 vertical-align，也得同步检查 font-family 是否跨平台一致、box-sizing 是否全局重置、以及是否无意中触发了 inline-block 的换行空白。这些细节不处理，换设备就露馅。