如何基于最长文本内容设置两个元素的相同宽度

方案1：纯CSS实现（最优选择，无额外性能开销） #

这是最简单也最推荐的方案，利用网格布局的特性自动实现宽度同步，不需要任何脚本：

<!-- 父容器包裹两个需要同步宽度的元素 -->
<div class="btn-group">
  <button>ouverture de session</button>
  <button>xyz</button>
</div>

.btn-group {
  /* 设为行内网格，宽度由最长的子元素内容决定 */
  display: inline-grid;
  /* 子元素横向排列 */
  grid-auto-flow: column;
  /* 可选：设置两个按钮的间距 */
  gap: 12px;
}

所有子元素会自动平分父容器宽度，最终整体宽度刚好适配最长文本的宽度，完全满足需求。

方案2：通用JavaScript实现 #

如果有特殊场景无法使用CSS方案，可以用脚本动态计算同步宽度：

// 获取需要同步宽度的所有元素
const targetElements = document.querySelectorAll('.sync-width-item');

function syncElementWidth() {
  // 先清空宽度设置，获取元素真实内容宽度
  targetElements.forEach(el => el.style.width = 'auto');
  // 计算所有元素的最大宽度
  const maxWidth = Math.max(...Array.from(targetElements).map(el => el.offsetWidth));
  // 统一设置宽度
  targetElements.forEach(el => el.style.width = `${maxWidth}px`);
}

// 初始化同步
syncElementWidth();
// 可选：窗口大小变化时重新同步
window.addEventListener('resize', syncElementWidth);

方案3：Angular专属封装 #

如果是Angular项目，可以封装为可复用的指令，使用更便捷：

第一步：创建同步宽度指令 #

import { Directive, ElementRef, AfterViewInit, HostListener } from '@angular/core';

@Directive({
  selector: '[syncWidthGroup]',
  standalone: true
})
export class SyncWidthGroupDirective implements AfterViewInit {
  constructor(private hostEl: ElementRef<HTMLElement>) {}

  ngAfterViewInit() {
    this.syncWidth();
  }

  // 窗口尺寸变化时自动重算
  @HostListener('window:resize')
  syncWidth() {
    const childElements = Array.from(this.hostEl.nativeElement.children) as HTMLElement[];
    childElements.forEach(el => el.style.width = 'auto');
    const maxWidth = Math.max(...childElements.map(el => el.offsetWidth));
    childElements.forEach(el => el.style.width = `${maxWidth}px`);
  }
}

第二步：模板中使用 #

<!-- 给父容器加syncWidthGroup指令即可 -->
<div syncWidthGroup>
  <button>ouverture de session</button>
  <button>xyz</button>
</div>

使用前需要将该指令导入到对应组件的imports数组中。

内容的提问来源于stack exchange，提问作者Outside the Box Developer