纯CSS实现：基于最宽元素为非兄弟关系的多个<span>设置相同宽度

当然可以用纯CSS实现这个需求！不用JavaScript遍历两次元素，浏览器本身就能帮我们处理宽度对齐的问题。下面我会分两种场景给出方案：优先不修改现有HTML结构的方案，再补充兼容性更好的方案（无需大幅调整HTML）。

方案一：不修改HTML结构——CSS Grid + display: contents #

这个方案利用CSS Grid的特性：同一列的宽度会自动取该列所有元素的最大内容宽度。通过display: contents让父容器.variant的盒子“透明化”，直接让里面的<span>成为Grid容器的子元素，从而共享列宽。

实现代码 #

.container {
  display: grid;
  /* 第一列宽度由最宽的.variant-name决定，第二列自动填充剩余空间 */
  grid-template-columns: max-content auto;
  gap: 5px; /* 替代margin-right，控制标签和值之间的间距 */
  width: 100%;
}

.variant {
  display: contents; /* 让子元素直接参与Grid布局，本身不生成盒子 */
}

.variant-name {
  text-align: left; /* 确保标签左对齐，可选 */
}

HTML保持你原来的结构不变：

<div class="container">
  <div class="variant">
    <span class="variant-name">Size:</span>
    <span>28</span>
  </div>
  <div class="variant">
    <span class="variant-name">Waterproof:</span>
    <span>Yes</span>
  </div>
  <div class="variant">
    <span class="variant-name">Color:</span>
    <span>Azure</span>
  </div>
</div>

原理说明 #

• display: grid把.container变成Grid容器，grid-template-columns: max-content auto定义了两列：第一列宽度为该列所有元素的最大内容宽度（也就是最宽的.variant-name的宽度），第二列自动占满剩余空间。
• display: contents让.variant不生成独立的盒子，它的子元素<span>会直接成为.container的Grid子元素，这样所有.variant-name都属于Grid的第一列，自然共享同一宽度。

方案二：兼容性更好——CSS Table布局 #

如果需要兼容较旧的浏览器（比如IE11），可以用CSS Table布局，原理和HTML表格类似：表格的列宽会自动适配最宽单元格的内容。这个方案同样不需要修改HTML结构，仅调整CSS即可。

实现代码 #

.container {
  display: table;
  width: 100%;
  border-collapse: separate;
  border-spacing: 5px 0; /* 控制标签和值的间距 */
}

.variant {
  display: table-row; /* 把每个.variant变成表格行 */
}

.variant-name, .variant span:last-child {
  display: table-cell; /* 把span变成表格单元格 */
}

.variant-name {
  width: 1%; /* 强制列宽由内容决定，而非占满容器 */
  white-space: nowrap; /* 防止标签文本换行，可选 */
}

原理说明 #

• display: table把.container模拟成表格，.variant作为表格行，<span>作为表格单元格。
• 表格的第一列会自动取所有单元格中的最大宽度，实现所有.variant-name对齐的效果。width: 1%是一个实用技巧，确保列宽不会被容器拉伸，完全由内容决定。

为什么纯CSS方案比JavaScript更好？ #

1. 性能更优：浏览器原生处理布局，不需要JS遍历DOM元素、计算宽度再赋值，减少了脚本执行开销。
2. 响应式自动适配：当窗口大小变化、文本换行时，CSS会自动重新计算列宽；而JS方案需要额外监听resize事件，重新执行计算逻辑。
3. 代码更简洁：不需要维护JS逻辑，CSS声明就能完成需求，更易维护。

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