如何实现same-width类文本与最长文本同宽？CSS优先，不行则用纯JS

优先CSS方案（推荐） #

用CSS Grid就能实现，无需JS干预。核心利用Grid列自动同步宽度的特性，让所有目标元素匹配最长文本的宽度。

修改后的CSS代码：

fieldset {
  display: grid;
}
.field {
  display: flex;
  align-items: center;
}
.field label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px; /* 可选，调整文本与输入框的间距 */
  flex: 1;
}
/* 可选：设置文本右对齐，排版更整齐 */
.same-width {
  text-align: right;
}

HTML结构保持你提供的原样即可。

实现逻辑：

• 给fieldset设置Grid布局，让内部所有.field处于统一的布局上下文
• 每个label用Grid拆分为两列：第一列对应.same-width文本，宽度由最长内容自动撑开；第二列留给输入控件，占满剩余空间
• Grid会自动同步所有行的第一列宽度，直接达成统一宽度的效果

纯JavaScript方案（CSS受限场景使用） #

如果因旧浏览器兼容或其他限制无法使用Grid，可通过JS动态计算并设置宽度：

const sameWidthEls = document.querySelectorAll('.same-width');

if (sameWidthEls.length) {
  let maxWidth = 0;
  // 遍历找出最宽的元素
  sameWidthEls.forEach(el => {
    maxWidth = Math.max(maxWidth, el.offsetWidth);
  });
  // 给所有元素设置最大宽度
  sameWidthEls.forEach(el => {
    el.style.width = `${maxWidth}px`;
  });
}

注意：如果文本内容是动态加载或后期修改的，需要在内容更新后重新执行这段代码。

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