按钮高度不一致主因是父容器缺高度约束或子元素样式差异；应设父容器为flex且align-items: stretch，统一按钮padding、font、box-sizing等，并规范white-space与换行处理。
按钮高度不一致，通常是因为父容器未设置明确的高度约束，或子元素（按钮）的默认对齐行为导致基线、内边距、字体大小、行高等差异被放大。使用 align-items: stretch 确实能解决部分问题，但需配合正确的 Flex 布局结构才能生效。
确保父容器是 flex 容器且方向为 row
align-items: stretch 是 Flex 布局的属性，只在 display: flex 或 display: inline-flex 的容器上起作用，且默认作用于交叉轴（即 column 方向时控制水平拉伸，row 方向时控制垂直拉伸）。按钮并排显示时，父容器应设为 flex-direction: row（默认值），此时 align-items 控制的是所有按钮在垂直方向上的对齐与拉伸行为。
- 给按钮外层加
display: flex - 确认未显式设置
align-items: flex-start或center等覆盖默认 stretch 行为的值 - 避免父容器设置了
height或max-height限制，否则 stretch 可能被截断
清除按钮自身的干扰样式
即使父容器启用 stretch，按钮若自带 padding、line-height、font-size、border 或 vertical-align，仍可能导致视觉高度不统一。特别是当按钮内含文字+图标、或使用不同标签（button vs a vs div）时，基线差异会更明显。
- 统一重置按钮的
margin、padding、border和font相关属性 - 设置
box-sizing: border-box，让 padding/border 不影响尺寸计算 - 避免混用
line-height和height；推荐用padding控制高度，更易响应式适配 - 若按钮内含图标，确保图标使用
vertical-align: middle或转为 flex 子项统一对其
处理文字换行与内容溢出
当按钮文字较长、在小屏幕中自动换行，会导致实际高度升高，stretch 会强制所有按钮匹配最高那个——这反而是你想要的效果。但如果某些按钮因 white-space: nowrap 被撑宽溢出，而另一些正常换行，高度就会不一致。
立即学习“前端免费学习笔记（深入）”；
- 统一设置按钮的
white-space: normal（默认）或根据需求统一为nowrap - 用
min-width配合flex: 1让按钮等宽自适应，再结合text-overflow: ellipsis处理超长文本 - 对多行文本按钮，可加
line-clamp限制行数，保持高度可控
备选方案：用 min-height + flex 对齐更稳妥
如果 stretch 在某些浏览器或嵌套场景下表现不稳定（如按钮内有 inline 元素或伪元素），可改用更显式的控制方式：
- 给所有按钮设置统一的
min-height（如min-height: 40px） - 父容器设
display: flex; align-items: center;，再配合min-height保证视觉齐平 - 对需要“拉满高度”的场景，可加
height: 100%并确保父容器有明确高度（如通过min-height或flex: 1传递）
