Html 平均填充父宽度

我有一个容器，里面有一些按钮：

<div class="button-container">
        <button type="button" class="edit-quantity">Edit Quantity</button>
        <button type="button" class="edit-price">Edit Price</button>
        <button type="button" class="remove-item">Remove</button>
        <button type="button" class="remove-all">Remove All</button>
    </div>

编辑数量
编辑价格
去除
全部删除

---

即使只有1个、2个或3个按钮，我如何设置按钮和容器的样式，使按钮均匀地填充容器宽度？

您可以使用

显示：表格和
显示：表格单元格如果在按钮周围添加换行div：


HTML:

使用CSS3:中的
display:flex

是否接受仅限CSS3的解决方案？您需要支持哪种浏览器？@RGraham Yup，这是我要回答的解决方案，但看起来它已经被涵盖。使用flex box布局是非常有前景的，将来我们可以使用这种布局而不必担心支持问题，但现在仍然有许多浏览器（几乎是旧版本）缺少对这种布局的支持…这似乎是可行的，但我不确定是否所有浏览器都支持它。。。谢谢@台式机上的放大器
<div class="button-container">
    <div>
        <button type="button" class="edit-quantity">...</button>
    </div>
    <div>
        <button type="button" class="edit-price">...</button>
    </div>
    <div>
        <button type="button" class="remove-item">...</button>
    </div>
    <div>
        <button type="button" class="remove-all">...</button>
    </div>
</div>

.button-container {
    width:100%;
    height:100px;
    display:table;
}
.button-container >div {
    display:table-cell;
}
.button-container button {
    height:100%;
    width:100%;
}

.button-container{
    width:100%;
    display: flex;
}

.button-container button{
    width:100%;
}