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

Question

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

我可以简单地为按钮的 CSS 样式做一个min-length，但是有些按钮组很短，而另一些则很长。这使得统一的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%;

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

Answer 2

将它们都包装在一个容器中。

<div class="group">
    <div class="button">Hi</div>
    <div class="button">Wassup</div>
    <div class="button">Yo</div>
</div>

然后像这样应用 css：

    display:inline-block;
    min-width: 100%;

然后设置 div“组”，将这些 div 分组为您想要的宽度

Answer 3

使用最小宽度和最大宽度：

div{/*use the selector what you're using*/
  min-width: 150px;
  max-width: 350px;
  width: auto;
  display: inline-block;
}

---

如果你想得到一个统一的宽度，那么你必须像这样定义一个类名和样式：

.width1{
  width: 200px;
}

.width2{
  width: 300px;
}