最稳妥的方式是给父容器设置 display: flex、gap 和 align-items: center；直接并列写两个 button 会因 HTML 空白符产生不可控间隙、换行及垂直错位，且缺失边框合并、圆角统一和禁用联动等关键特性。
直接用 display: flex 在父容器上，是最稳、最可控的方式；别指望靠 HTML 空格或默认 inline 行为“碰运气”。
为什么两个 <button> 默认不并排？
虽然 <button> 是行内级元素，但 HTML 源码里的换行符、缩进空格会被浏览器解析为一个空白字符，导致按钮间出现不可控间隙，甚至在窄屏下换行。更麻烦的是，不同浏览器对 inline 元素的基线对齐、垂直间距处理不一致，按钮容易上下错位。
- 常见错误现象：PC 上看着好好的，移动端第二个按钮突然掉到下一行
- 常见错误现象：按钮文字长度不同，高度不一致，视觉上“一高一低”
- 常见错误现象：加了
margin-right手动调间距，结果缩放时间隙崩塌或重叠
display: flex 布局怎么写才不出错？
核心就三行 CSS，但顺序和细节决定成败：
- 必须作用在**父容器**上，不是按钮本身 —— 写成
.btn-group { display: flex; }，不是button { display: flex; } - 加
gap: 8px控制按钮间距，比手动设margin更可靠（不会影响首尾外边距） - 加
align-items: center解决垂直对齐问题，尤其当按钮内含图标或行高不一时 - 如果按钮需要等宽（比如“确认/取消”），给子按钮加
flex: 1，但注意：flex: 1会让它们均分剩余空间，文字过长可能溢出，需配合white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
Bootstrap 里为什么必须用 .btn-group？
因为 Bootstrap 的 .btn-group 不只是加了个 display: flex，它还做了几件关键事：
立即学习“前端免费学习笔记（深入）”；
- 自动合并相邻按钮的左右边框（只留最左和最右的边框），避免双线问题
- 统一圆角逻辑：首按钮左圆角、尾按钮右圆角，中间按钮无圆角
- 禁用状态（
disabled）下整组按钮联动灰化，而不是单个失效 - 响应式断点控制：小屏下可自动转为垂直堆叠（配合
.btn-group-vertical） - 直接并列写两个
<button class="btn">，在sm断点下大概率换行，且无法继承上述特性
移动端触控体验容易被忽略的细节
按钮并排后，真正上线常遇到点击失灵或误触，根源不在布局，而在尺寸和交互反馈：
- 按钮最小触控区域建议 ≥ 44×44px，仅靠
padding不够 —— 要设min-width: 44px+min-height: 44px - 点击时必须加视觉反馈，比如
isvoting类切换背景色或加 loading 图标，否则用户会反复点击 - 用
pointer-events: none禁用按钮期间，记得同步移除tabindex，否则键盘用户仍能聚焦到禁用态按钮上 - 不要用
float或table实现并排 —— 它们在现代项目中语义不清、维护成本高，且与触控事件兼容性差
真正难的不是让两个按钮“看起来并排”，而是让它们在各种设备、各种状态、各种交互路径下都保持可用、对齐、可感知。布局只是起点，后续的禁用逻辑、加载态、焦点管理、触控适配，才是实际交付时最容易翻车的地方。
