仅 CSS - 多个元素的宽度相同<span>，基于最大

Question

我很好奇是否有一种方法可以将多个<span>元素的width属性设置为相同的值，如果它们不是彼此的兄弟姐妹。宽度应该基于最大的span元素。

预期的结果类似于表格，其中左边的文本将自动增长。

所以不用这个:

Text: Value
Larger Text: Value

我想要这样:

Text:        Value
Larger Text: Value

我知道这可以用JavaScript完成(见最后的例子)，但我想知道如果这是可能的只有CSS。
最好不改变HTML结构，但我也愿意接受这样的答案。

我发现了一些类似的问题，但它们是关于兄弟姐妹间的。所以这并不适合我的情况:
让相邻的兄弟元素具有相同的宽度只用CSS
如何在div

中设置多个span宽度相等呢?

---

为什么我想要一个只有CSS的解决方案，而不是JS?

因为我要循环这些元素两次

1. 确定这些元素中哪个是最大的并从中获取宽度
2. 设置所有元素相同的宽度

---

下面是带有的工作示例JS:

const variantNames = document.querySelectorAll('.variant-name');
let greatestWidth = 0;
variantNames.forEach( (name) =>
{
if(name.offsetWidth > greatestWidth)
{
greatestWidth = name.offsetWidth;
}
});
variantNames.forEach( (name) =>
{
name.style.width = greatestWidth + 'px';
});

.container,
.variant {
width: 100%;
}
.variant-name {
display: inline-block;
margin-right: 5px;
}

<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>

Answer 1

最简单的解决方案，它将与您的HTML结构一起工作-将整个内容格式化为表格。

.container {
display: table;
}
.container .variant {
display: table-row;
}
.container .variant span {
display: table-cell;
}

<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>