如何用CSS实现inline-flex容器内按钮等宽且自适应最长内容？

我希望将一组按钮作为可内联使用的统一组件（例如嵌入段落中），目前采用的方案是用<span>包裹按钮并设置display: inline-flex样式。该方案运行正常，但我还希望让每个按钮宽度相同，且不占用多余空间，即每个按钮的宽度等于内容最长的按钮所需的最小宽度。请问仅使用CSS能否实现该效果？

现有代码 #

CSS #

button {
  border: 1px gray solid;
  border-radius: 5px;
}
span.button-group {
  display: inline-flex;
}
span.button-group button:not(:last-child){
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right-width: 0;
}
span.button-group button:not(:first-child){
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

HTML #

<p>
Here is a paragraph with a set of buttons: 
 <span class="button-group">
   <button>A</button>
   <button>Longer</button>
   <button>B</button>
   <button>C</button>
 </span>
</p>

完全可以用纯CSS实现，这里提供两种可行方案：

方案一：使用Grid布局（推荐） #

将按钮组的display从inline-flex改为inline-grid，并添加网格列配置，即可让所有按钮自动匹配最长按钮的宽度，同时保持内联特性。

修改后的CSS代码：

button {
  border: 1px gray solid;
  border-radius: 5px;
}
span.button-group {
  display: inline-grid; /* 替换为inline-grid */
  grid-template-columns: repeat(auto-fit, 1fr); /* 均分列宽 */
  gap: 0; /* 消除按钮间间隙 */
}
span.button-group button:not(:last-child){
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right-width: 0;
}
span.button-group button:not(:first-child){
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

核心原理：

• inline-grid保证按钮组能嵌入段落中正常显示；
• repeat(auto-fit, 1fr)让网格列自动适配按钮数量，每列均分容器宽度；
• Grid容器的宽度由内容最宽的按钮决定，因此所有按钮都会自动匹配这个最大宽度，且容器不会占用多余空间。

方案二：使用Flex布局（兼容性更好） #

如果需要兼容不支持Grid的老旧浏览器，可以在原有Flex布局基础上添加flex:1和min-width:0属性：

修改后的CSS代码：

button {
  border: 1px gray solid;
  border-radius: 5px;
}
span.button-group {
  display: inline-flex;
}
span.button-group button {
  flex: 1; /* 让按钮均分可用宽度 */
  min-width: 0; /* 确保按钮能收缩到内容宽度，避免溢出失效 */
}
span.button-group button:not(:last-child){
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right-width: 0;
}
span.button-group button:not(:first-child){
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

这个方案同样能实现需求，且对旧浏览器支持更友好。

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