display: inline-grid 是当前最可靠方案，通过 grid-auto-flow: column 和 grid-auto-columns: 1fr 实现按钮自动等宽且宽度由最长文本决定，无需 JS 或固定值。
要让多个按钮在一行内自动等宽对齐，且宽度由最长文本决定、不依赖 JS 或固定值，display: inline-grid 是当前最可靠、语义清晰、无需 hack 的方案。
用 inline-grid 实现内容驱动的等宽按钮
传统 flex 会让按钮平均分占容器宽度（如三按钮各占 33%），但若你希望所有按钮宽度 = 最长按钮的固有宽度（比如“删除用户”比“确定”宽，则全部拉伸到“删除用户”的宽度），inline-grid 是唯一原生支持该行为的 CSS 方案。
-
display: inline-grid让容器保持内联流特性，不破坏周围文字或布局上下文 -
grid-auto-flow: column确保子元素按顺序从左到右生成列（不是行） -
grid-auto-columns: 1fr触发 Grid 的隐式列尺寸同步机制：所有列共享同一轨道尺寸，该尺寸取自所有列中内容的最大固有宽度 - 必须移除按钮默认的
margin（尤其是margin: 0.33em这类 UA 样式），否则会干扰列宽计算；改用gap控制间距
表格内按钮统一高度 + 宽度的特殊处理
当按钮放在 <td> 中时，仅设 width: 100%; height: 100% 不生效——因为 <td> 高度由内容撑开，而按钮的 height: 100% 只能继承其父 <td> 的“内容高度”，不是整行高度。
- 给
<table>加table-layout: fixed，锁定列宽，避免内容差异导致列抖动 - 给
<td>设vertical-align: middle和height: 100%（需父<tr>有明确高度或由最长<td>决定） - 按钮本身去掉
margin，设box-sizing: border-box+width: 100%; height: 100% - 关键：确保所有
<td>在同一<tr>中，Grid 或 Flex 无法跨单元格同步高度，但表格天然支持整行等高
Flexbox 下实现“伪等宽”按钮组的边界与陷阱
Flexbox 能让按钮等高（align-items: stretch），也能让它们平均分宽（flex: 1），但它做不到「以最长内容为基准拉伸」——这是 Grid 的专属能力。误用 Flex 常见问题：
立即学习“前端免费学习笔记（深入）”；
- 设
flex: 1后按钮宽度被强制均分，哪怕某按钮只有两个字，也会和“导出全部历史记录”一样宽 - 响应式断点下，
flex-wrap: wrap会导致换行后每行按钮又重新均分，破坏跨行一致性 -
gap在 Flex 中兼容性好（Chrome 85+/Firefox 63+），但旧 Safari 需用margin-right模拟，且最后一个按钮要:last-child { margin-right: 0 } - 如果按钮需与文字并排（如段落末尾的“编辑”“删除”按钮），
display: inline-flex比flex更合适，否则会独占一行
真正难的不是写几行 CSS，而是判断场景：是否需要跨容器同步尺寸？是否嵌套在表格里？是否要保持内联流？选错布局模型，后面全靠 JS 补救——而多数时候，inline-grid 就是那个被低估的、刚好够用的解法。
