最可靠方法是父容器设display: flex并配合justify-content: space-between实现两按钮左右分列，兼容IE10+；若需等宽则改用flex: 1（或flex: 1 1 0%提升IE兼容性），IE9及以下需降级为display: table布局。
用 flex 布局让两个按钮左右分列最可靠
直接给父容器加 display: flex 和 justify-content: space-between 就能实现，不用浮动、不用绝对定位，兼容性好（IE10+），响应式也容易扩展。
常见错误是只给按钮设 float: left 和 float: right，结果父容器高度塌陷，按钮错位，或者在移动端叠在一起。
- 父元素必须是块级容器（如
<div>），不能是<span>这类内联元素 - 两个按钮需在同一父级下，不能一个在
<header>一个在<footer> - 如果按钮文字长度差异大，
space-between会让间距不均；此时改用flex: 1配合text-align更稳
<div style="display: flex; justify-content: space-between;"> <button>取消</button> <button>确认</button> </div>
按钮等宽左右撑满时用 flex: 1
当需要“取消”和“确认”按钮宽度一致、且各自占 50% 宽度时，justify-content: space-between 不管用——它只分配间隙，不控制子项尺寸。
这时候得让两个按钮都设 flex: 1，它们会自动均分剩余空间。
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 记得去掉按钮默认的
margin，否则会影响等宽效果 - 如果按钮内有图标或文字较长，可能溢出；建议加
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - IE 下
flex: 1行为略有差异，可补flex: 1 1 0%提高兼容性
<div style="display: flex;"> <button style="flex: 1; margin: 0;">取消</button> <button style="flex: 1; margin: 0;">确认</button> </div>
旧项目兼容 IE9 及以下怎么办
IE9 不支持 flex，只能退回到表格布局或 float。但 float 容易塌陷，表格又语义不清，所以推荐用 display: table 模拟两列。
这不是“最佳实践”，而是现实妥协：只要父容器设 display: table; width: 100%，两个按钮设 display: table-cell，就能严格左右分列，且不会塌陷。
- 按钮不能设
float或inline-block，否则会破坏 table-cell 行为 - 如果按钮需要垂直居中，加
vertical-align: middle到每个table-cell - 注意
table布局对响应式不友好，小屏时建议用媒体查询切回 block 堆叠
<div style="display: table; width: 100%;"> <button style="display: table-cell; width: 50%;">取消</button> <button style="display: table-cell; width: 50%;">确认</button> </div>
按钮点击区域太小？别只调 font-size
左右分列后常发现按钮难点——尤其在触摸设备上。问题不在布局，而在点击热区不够。
padding 才是关键：光放大 font-size 会让文字撑开但热区不变；必须显式设 padding（比如 padding: 12px 24px），才能扩大可点击范围。
- 移动端至少保证
44px × 44px点击区域，iOS 和 Android 都有此建议 - 如果按钮用了
border-radius，记得配合overflow: hidden防止背景溢出 - 避免用
line-height替代padding控制高度——它只影响文字垂直位置，不增加热区
<button style="padding: 12px 24px; border-radius: 4px;">确认</button>实际项目里，多数情况用 flex 就够了；但得留意按钮内容是否动态、是否要适配老系统、点击体验是否达标——这些细节比“怎么分列”更决定用户能不能顺利点下去。
