如何让不同父容器下的多个按钮统一匹配最宽按钮的宽度？

哎，这种被历史遗留设计坑到的感觉太懂了！按钮散在各种不同的父容器里还不能改结构，要统一成最宽按钮的尺寸，其实用CSS或者原生JS都能搞定，而且你说文本和按钮数量都是渲染前就确定的，这就更简单了，给你两种方案：

CSS方案（无需JS，适合已知固定文本的情况） #

既然你已经明确知道最宽按钮的文本是「really long text means really wide button」，我们可以利用这个信息来设置统一宽度，还能适配不同字体和缩放场景：

1. 先定义一个CSS变量，再用一个隐藏的「参照物」元素来计算目标文本的实际宽度：

/* 定义全局CSS变量 */
:root {
  --max-button-width: 0;
}

/* 隐藏的参照物，用来计算最长文本的宽度 */
.button-width-reference {
  position: absolute;
  visibility: hidden;
  white-space: nowrap;
  font: inherit; /* 和按钮使用完全一致的字体样式 */
  content: "really long text means really wide button";
}

/* 给所有目标按钮应用统一宽度 */
.myButton {
  width: var(--max-button-width);
  white-space: nowrap; /* 防止文本换行，保证宽度一致 */
}

2. 在HTML的任意位置（比如<body>开头）添加这个参照物元素：

<div class="button-width-reference"></div>

浏览器会自动计算参照物的宽度并赋值给CSS变量，所有按钮就会自动匹配这个最宽尺寸了。

如果你的按钮字体样式固定，也可以直接用ch单位估算（比如数出最长文本的字符数，设置width: 35ch），但参照物方法的精准度更高。

原生JS方案（动态计算，适配任意文本） #

如果以后按钮文本可能变化，用JS动态计算最宽按钮的宽度会更灵活，不管按钮散在哪个父容器里都能生效：

// 等待DOM渲染完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 获取所有带.myButton类的按钮
  const buttons = document.querySelectorAll('.myButton');
  let maxWidth = 0;

  // 遍历所有按钮，找到最宽的那个的宽度
  buttons.forEach(button => {
    const currentWidth = button.offsetWidth;
    if (currentWidth > maxWidth) {
      maxWidth = currentWidth;
    }
  });

  // 给所有按钮统一设置最大宽度
  buttons.forEach(button => {
    button.style.width = `${maxWidth}px`;
    button.style.whiteSpace = 'nowrap'; // 确保文本不换行
  });
});

这个方法不用提前知道最长文本内容，完全动态计算，适合按钮文本可能变动的场景。

备注：内容来源于stack exchange，提问作者Marsroverr