根本问题在于默认 display 类型和盒模型干扰：label 为 inline 元素，input 为替换元素，基线对齐逻辑不同，叠加 margin 和 line-height 差异导致错位。
为什么嵌套的 <label></label> 和 <input> 总是对不齐
根本问题不在标签本身，而在默认 display 类型和盒模型干扰。浏览器把 <label></label> 当作 inline 元素，<input> 是替换元素，它们的基线（baseline）对齐逻辑不同，加上默认 margin、line-height 差异，视觉错位立刻出现。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 每组
<label></label>+<input>必须包在独立<div> 或 <code><fieldset></fieldset>里，否则text-align或flex作用域会越界 - 父容器设
display: flex+align-items: center，比单独调vertical-align稳定十倍 -
<label></label>加固定宽（如width: 120px）+text-align: right+flex-shrink: 0，避免文字长时挤压 -
<input>用flex: 1或显式width，别依赖默认尺寸——不同浏览器下input[type="text"]的默认宽差异很大 - 给所有
<figure></figure>的直接父容器加display: flex+align-items: flex-end，强制子项底部对齐 - 每个
<figure></figure>内部再加一层display: flex+flex-direction: column，然后对<figcaption></figcaption>设margin-top: auto，把它“推”到底部 - 绝对不要给
<figcaption></figcaption>单独设display: inline-block——它会脱离语义结构，且触发行内布局的 baseline 干扰 - 如果用了
font-size响应式缩放，记得同步重置line-height，否则标题行高变化会破坏底部对齐 - 用浏览器 DevTools 检查「Computed」面板，确认
align-items是否真的生效在目标父容器上，而不是被更外层样式覆盖 - 所有中间容器必须显式声明
display: flex或display: block，避免浏览器自动包裹匿名文本节点（比如换行符、空格）造成意外行内盒 - 对齐前先清空干扰项：
* { margin: 0; padding: 0; }或至少重置button、input、p的默认 margin - 如果嵌套层级深，优先用
margin-left: auto或margin-right: auto控制单个子项位置，比层层设align-items更可控 - 子表别设
width: 100%——它会尝试撑满<td>，但 <code><td> 宽度又受父表列宽约束，极易引发溢出或压缩<li>现代项目中，用 <code><details></details>+<summary></summary>替代静态嵌套表，可访问性更好，DOM 更干净，也更容易对齐
嵌套 <figure></figure> + <figcaption></figcaption> 底部对齐失效
常见现象是图片底边齐平，但标题高低不一。这是因为 <figcaption></figcaption> 默认是块级元素，高度由内容撑开，且未参与父容器的 flex 对齐上下文。
实操建议：
立即学习“前端免费学习笔记（深入）”；
Flex 容器里嵌套了 <div> 还是对不齐<p>不是 <code>align-items: center 失效，而是对齐上下文被污染了：中间多了一层未设 display: flex 的容器、空格文本节点、或某个子元素偷偷加了 margin。
实操建议：
立即学习“前端免费学习笔记（深入）”；
表格里嵌套子表后对齐全乱了
浏览器只允许 <tr> 的直接子元素是 <code><td> 或 <code><th>。把子表直接写在 <code><tr> 下，DOM 就会被自动修正——可能丢到表格外，也可能塞进隐式 <code><tbody>，导致 CSS 选不到、JS 找不到节点。<p>实操建议：</p>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul><li>子表必须完整放在某个 <code><td> 或 <code><th> 内部，不能跨单元格，也不能悬在 <code><tr> 下<li>子表自身要重置 <code>border-collapse: separate，否则继承父表的 collapse 会导致边框合并异常
真正难的不是“怎么让元素并排”，而是并排之后，嵌套层级带来的 display 类型混用、默认 margin/line-height 的隐性叠加、以及浏览器对非法嵌套的自动纠错——这些都会让对齐结果突然偏移几像素，而且很难一眼定位。
