用 display: inline-block 并配合 vertical-align 是让按钮并排显示最稳妥的方式，兼容 IE8+ 且行为可预测；flex 布局更适用于需对齐或响应式控制的场景，但不支持 IE9 及以下。
用 display: inline-block 让按钮并排显示最稳妥
浏览器默认把 <button></button> 当成块级元素，所以两个按钮会各自占一行。想让它们挨着，得手动改显示模式。inline-block 是最直接、兼容性最好（IE8+）、行为最可预测的方式。
- 别用
float: left—— 容易引发父容器塌陷，还得清浮动，多一步就多一个坑 - 别依赖
display: inline—— 按钮的宽高、内边距、垂直对齐会失效，样式失控 - 必须给按钮加
vertical-align: top或middle，否则默认按基线对齐，看起来像错位
示例：
<style>
.btn {
display: inline-block;
vertical-align: middle;
margin-right: 8px;
}
.btn:last-child {
margin-right: 0;
}
</style>
<button class="btn">保存</button>
<button class="btn">取消</button>
Flex 布局适合需要对齐或响应式控制的场景
如果按钮要居中、等宽、右对齐，或者要在小屏上堆叠，flex 更合适。但注意：它作用在父容器上，不是按钮本身。
- 父容器设
display: flex，子按钮自动变成行内排列，无需改按钮样式 - 用
justify-content控制水平位置（比如flex-end靠右），align-items控制垂直对齐 - IE10+ 支持带前缀的
flex，IE9 及以下完全不支持 —— 如果还要兼容老 IE，别选这个
示例（基础并排）：
立即学习“前端免费学习笔记（深入）”；
<div style="display: flex;"> <button>保存</button> <button>取消</button> </div>
别踩这些常见坑
看似简单，实际调试时高频出问题的地方就那几个：
- 按钮之间有空格或换行 —— HTML 中的空白符会被渲染成一个空格，导致按钮间出现小间隙；解决方法：删掉标签间的换行/空格，或给父容器设
font-size: 0（再给按钮单独设字号） - 按钮用了
width: 100%或flex: 1却没限制父容器宽度 —— 它们会撑满整行，反而变回“各占一行” - CSS 优先级冲突 —— 比如框架（如 Bootstrap）自带的
btn类可能含display: inline-block，但又被其他规则覆盖，用浏览器开发者工具检查计算后的display值最准
移动端要注意按钮间距和点击区域
纯 CSS 并排只是第一步。真正在手机上用，得确保用户能点准：
- 按钮之间至少留
8px以上margin，避免误触 - 按钮本身高度别小于
44px（iOS 触摸最小推荐尺寸），可用min-height+padding保证 - 如果按钮文字长，用
white-space: nowrap防止折行破坏布局，但也要考虑超长时是否该换行或截断
这点容易被忽略：样式调好了，但在 iPhone 上手指一划全点歪了，问题不在布局，在交互安全边界。
