两个按钮默认不并排，因为<button>是替换元素、display为inline-level，HTML换行符和空格被解析为约4px空白间隙，且vertical-align:baseline导致高低错位；推荐父容器设display:flex、align-items:center、gap控制间距。
为什么两个
因为
常见错误现象包括：PC 看着正常，移动端第二个按钮突然换行；加了 margin-right 调间距，缩放后间隙崩塌；直接写 <button></button><button></button> 却发现按钮没对齐、有缝、甚至错位。
用 display: flex 最稳，但必须写对地方
核心不是给 button 加 flex，而是给**父容器**设 display: flex。只改按钮本身完全无效。
-
gap: 8px控制按钮间距——它不会在首尾多出外边距，比margin-right更安全 -
align-items: center解决垂直对齐问题，尤其当按钮含图标或行高不一时 - 若需等宽（如“确认/取消”），给每个 button 加
flex: 1 1 0%，并配合min-width: 0防止文字撑破布局 - 避免
justify-content: space-between却不设父容器宽度——它需要“剩余空间”才能生效，否则按钮仍堆左上角
兼容老浏览器？inline-block 可用，但三步缺一不可
IE8+ 支持 display: inline-block，但仅写这一句大概率失败。
立即学习“前端免费学习笔记（深入）”；
- 两个
<button>都要加display: inline-block - 必须显式设
vertical-align: top（推荐）或middle，否则 baseline 对齐会错位 - 解决 HTML 换行符带来的间隙：要么把两个标签写在同一行（无换行无空格），要么给父容器设
font-size: 0，再单独给按钮重设font-size - 别漏
box-sizing: border-box，否则 padding 和 border 会额外加宽，导致意外换行
HTML 邮件里不能用 flex？用表格 + 宽度微调
Outlook、Gmail Web/App 等客户端禁用 Flexbox 和 Grid，必须用语义清晰的 <table> 布局。
- 用两个独立的
<table>分别包裹按钮，align="left"和align="right"实现并排 - 每个表格宽度设为
width="49%"（不是 50%），留出 2% 余量规避 Outlook 四舍五入渲染误差 - 移动端通过媒体查询将
width改为100%，并设display: block强制堆叠 - 按钮本身用
<td>包裹，内联样式控制 padding、背景、圆角等，确保各客户端表现一致
真正容易被忽略的是：按钮是否设置了 min-width 和 min-height 满足触控区域 ≥ 44×44px；以及禁用状态时是否同步移除了 tabindex——键盘用户仍能聚焦到 disabled 按钮上，这在无障碍测试中常被卡住。
