最可靠方式是给按钮父容器设display: flex，子按钮默认水平排列；推荐用gap控制间距，justify-content控制对齐，避免float导致的塌陷与兼容问题。
display: flex 是目前最可靠、最可控的水平排列多个按钮的方式，浮动（float）已不推荐用于布局。
用 display: flex 水平排列按钮最稳妥
给按钮的父容器设置 display: flex，子按钮默认就在主轴（水平方向）上依次排列，无需额外清除浮动或处理文档流塌陷。
- 必须作用于**直接父容器**，不能跳级设置
- 按钮本身不需要加
float、inline-block或其他 display 变更 - 若按钮间有默认间距（如换行符/空格），可用
font-size: 0在父容器上消除，或改用flex-wrap: nowrap（默认就是）+ 删除 HTML 中的空白符 - 对齐控制直接用
justify-content：比如justify-content: space-between均匀撑满，justify-content: center居中，justify-content: flex-start左对齐（默认）
示例：
<div class="btn-group">
<button>保存</button>
<button>取消</button>
<button>删除</button>
</div>
<p><style>
.btn-group {
display: flex;
gap: 8px; /<em> 推荐用 gap 替代 margin，更干净 /
}
</style></p>
为什么不用 float 排按钮？
float 本质是为文字环绕设计的，强行用于按钮排列会引入一堆副作用：
- 父容器高度坍塌——必须手动清除浮动（
overflow: hidden、伪元素等），否则后续内容会上移 - 按钮变成脱离文档流，
vertical-align失效，垂直对齐难控制 - 响应式下容易错位，尤其按钮宽度不固定时
- IE6/7 的兼容问题早已不是理由，现代项目里没必要背这个包袱
哪怕你只写 button { float: left; }，也得立刻给父容器加 overflow: hidden 或 ::after 清除，多出两行代码还不可靠。
gap 比 margin 更适合按钮间距
在 display: flex 容器中，gap 是专为子项间隙设计的属性，比每个按钮加 margin-right 更安全：
-
gap不会触发外边距合并（margin collapse） - 不会影响第一个/最后一个按钮的边界（不用写 :first-child/:last-child）
- 支持
row-gap/column-gap独立控制，换行时依然有效 - IE 不支持
gap（仅到 Edge 16+），如需兼容 IE11，才退回到margin-right+:not(:last-child)
按钮宽度不一致时怎么对齐？
如果按钮文字长度差异大，导致宽度参差，又想视觉上“对齐边缘”，别用 width: 100% 强撑——那会让短文本按钮显得臃肿。
- 优先用
min-width统一最小宽度，保留自然伸缩性：button { min-width: 80px; } - 需要等宽时，用
flex: 1让所有按钮均分剩余空间（注意：要配合flex-basis: 0避免内容宽度干扰） - 垂直居中依赖
align-items: center（父容器设），不是靠line-height或padding偷摸调
真正容易被忽略的是：按钮的 white-space: nowrap 默认开启，但若按钮内含图标+文字，且容器窄，文字可能折行破坏布局——这时得显式加 white-space: nowrap 或用 flex-shrink: 0 锁住不压缩。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
