按钮组必须包裹在 display: flex 容器中，通过 justify-content 和 gap 控制对齐与间距；按钮统一设 height、box-sizing: border-box、line-height: 1 保证等高；响应式用 flex-wrap + flex: 1 1 calc() + max-width 实现自适应换行；表单行需显式设 align-items: center 避免高度偏差。
按钮组必须包裹在 flex 容器中，且父容器需设 display: flex
直接给 button 加 margin 或靠 text-align: center 撑开，会在多级表单（如嵌套 fieldset、div.form-group、或带条件渲染的区块）里失效——因为外层容器可能没设 display: flex，导致 justify-content 无作用。
正确做法是：把按钮组单独包一层 div，并显式设为 display: flex，再用 justify-content 控制水平对齐方式：
<div class="form-actions"> <button type="submit">提交</button> <button type="button">重置</button> </div>
对应 CSS：
.form-actions {
display: flex;
justify-content: flex-end; /* 或 center / space-between */
gap: 0.5rem;
}
-
gap比手动写margin-right更可靠，避免最后一项多出空白 - 不要用
text-align+inline-block—— 多级嵌套下容易被父级line-height或font-size干扰对齐基线 - 若按钮需等宽（如“上一步/下一步”），加
flex: 1到每个button，但注意min-width防止过窄
多级表单中按钮高度不一致？统一用 height + box-sizing: border-box
常见现象：主表单里的 button 高度正常，但弹窗表单或折叠面板里的按钮矮一截。根源是不同层级继承了不同的 font-size、padding 或默认 line-height，导致计算高度偏差。
解决不是靠猜 padding 值，而是锁定物理尺寸：
button {
height: 40px;
box-sizing: border-box;
padding: 0 16px;
font-size: 14px;
line-height: 1;
}
-
height强制统高，box-sizing: border-box确保padding不撑大总高 -
line-height: 1防止文字上下留白影响垂直居中 - 避免用
min-height—— 它只保底，无法约束最大高度，多级嵌套时仍会参差
响应式场景下按钮组换行错位？用 flex-wrap: wrap + width 控制断点
小屏时按钮组常被挤到下一行，但左对齐、右对齐或居中对齐逻辑全乱——尤其当按钮文本长度差异大（如“保存草稿” vs “提交”）时。
别依赖媒体查询反复改 justify-content，而是让按钮组自己适应：
.form-actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
<p>.form-actions button {
flex: 1 1 calc(50% - 0.25rem); /<em> 两列布局，预留 gap </em>/
max-width: 200px; /<em> 防止单个按钮过宽 </em>/
}</p>
-
flex: 1 1让按钮可伸缩，calc()精确控制换行阈值 -
max-width比width更安全，避免长文本按钮撑破容器 - 禁用
white-space: nowrap—— 它会让按钮文字溢出或破坏换行逻辑
表单提交按钮与其他输入框水平不对齐？检查父容器是否用了 align-items: stretch
按钮看起来“下沉”半像素，或者比 input 高出一点，不是按钮问题，而是父 flex 容器默认拉伸子项高度导致的视觉偏差。
典型结构：
<div class="form-row"> <label>邮箱</label> <input type="email"> </div> <div class="form-actions">...</div>
如果 .form-row 是 display: flex，它默认 align-items: stretch，而 input 有默认 border 和 box-sizing，按钮没有——高度计算基准不一致。
- 给
.form-row显式设align-items: center，而不是依赖默认值 - 所有表单控件（
input、select、button）统一设box-sizing: border-box - 避免在按钮上加
vertical-align—— flex 布局下该属性无效
真正麻烦的不是怎么对齐按钮，而是多级嵌套后哪一层悄悄重写了 display 或 align-items。建议用浏览器开发者工具逐层检查 computed styles，重点盯 display、align-items、height 和 box-sizing 这四个属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
