填充母宽度同样

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

您可以使用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%; 
}