当然可以不用JavaScript，纯CSS就能搞定这个需求！核心是利用CSS布局特性，让所有按钮自动适配最长兄弟按钮的宽度，同时保留“宽度由内容决定”的规则。

方案一：CSS Grid（推荐） #

这是最简洁且兼容性优秀的方案，完美匹配你的行内列布局需求：

1. 给按钮父容器设置inline-grid（让容器仅占据内容所需宽度，不会撑满父容器），并指定列宽为1fr，这样所有列会自动统一为最长内容的宽度；
2. 用grid-auto-flow: column让按钮横向排列，再用gap替代margin-right来控制按钮间距。

示例代码：

.button-container {
  display: inline-grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  gap: 20px; /* 替换原有的margin-right，更易维护 */
}

.link {
  height: 49px;
  padding: 0 24px;
  background: #your-button-color;
  border: none;
  border-radius: 4px;
  /* 保留你原有的其他样式 */
}

原理：Grid的1fr会基于列内最长内容计算统一宽度，既保证所有按钮等宽，又完全遵循“宽度由内容决定”的规则，不会像flex:1那样强制拉伸按钮。

方案二：Flexbox备选方案 #

如果你更习惯用Flexbox，也可以通过以下技巧实现：
给按钮设置flex: 1 0 max-content，让按钮基于自身内容宽度拉伸，但最大/最小宽度由内容决定，同时flex:1保证所有按钮宽度一致。

示例代码：

.button-container {
  display: flex;
  gap: 20px;
}

.link {
  flex: 1 0 max-content;
  height: 49px;
  padding: 0 24px;
  /* 保留你原有的其他样式 */
}

注：这个方案在少数旧浏览器中可能存在兼容性问题，Grid方案对现代浏览器的支持更完善。

以上两种方法都不需要JavaScript，纯CSS就能实现你想要的效果！

内容的提问来源于stack exchange，提问作者John Abraham