父母宽度相等

Question

我的容器宽度有一些按钮：

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

http://jsfiddle.net/gRzAB/

即使只有1个或2个或3个按钮，我如何按钮和容器的样式以使按钮同等地填充容器宽度？

Answer 1

如果您在按钮周围添加包装div，则可以使用display:table;和display:table-cell;：

<强> FIDDLE

HTML：

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

CSS：

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

Answer 2

使用CSS3中的display: flex：Check my fiddle。

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

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