如何仅使用 CSS 使一组 div 具有相同的宽度？

Question

我有一组按钮（div），我希望逻辑组中的所有按钮的长度相同。

我可以简单地min-length为按钮的 CSS 样式做一个，但是有些按钮组很短，而另一些则很长。这使得制服min-length对于长组或寻找短组是浪费/愚蠢的。此外，多个组（短期和长期）可以出现在同一屏幕上。

（这些 div 的样式都是display: inline-block，所以这就是为什么它们不填充容器的宽度）

我已经想到了一些讨厌的解决方案，但没有一个是可取的：

• min-length为每个组设置一个特定的
• 使用 JavaScript 调整按钮大小

我想知道是否有针对上述问题的通用纯 CSS 解决方案，而不是使用这些方法中的任何一种。感谢您的任何帮助，您可以提供。

---

编辑：这是我到目前为止的标记和 CSS。很简单：

HTML：

<div class="wrapper">
    <div class="button">Lorem ipsum</div>
    <div class="button">Lorem ipsum dolar</div>
    <div class="button">Lorem</div>
</div>

CSS：

div.button { display: inline-block; min-width: 50px; }

Answer 1

将类似的按钮包装在具有所需宽度的容器 div 中，并将内部 div 设置为：

box-sizing: border-box;
width: 100%;

这将允许您在一处编辑逻辑分组的宽度。