在CSS中跨越完整父寬度的3個相同大小的鏈接？

Question

我有以下問題： 我想使3個鏈接/錨點（填充和邊框X和邊距0）的大小相等（或至少是第一個和最後一個），並將它們全部3個一起跨距父寬度的100％。

無論怎樣，我試了一下，並沒有得到隔靴搔癢是跨瀏覽器（新的瀏覽器，而不是蹩腳的IE7），所以我珍玩，如果沒有人在那裏知道如何做到這一點

示例代碼：

<style> 
.menu{ 
    background : lightblue; 
    width  : 320px; 
    text-align : center; 
} 
.btn{ 
    display : inline-block; 
    background : #fff; 
    border  : 1px solid #666; 
    padding : 5px 10px; 
} 
</style> 

<div class="menu"> 
    <a href="#" id="btn1" class="btn">Btn1</a> 
    <a href="#" id="btn2" class="btn">Btn2</a> 
    <a href="#" id="btn3" class="btn">Btn3</a> 
</div> 

現在我什麼都試過，從它們添加到3列一個表來設置box-sizing:border-box;但似乎沒有任何工作

期望的結果是具有3個錨等於父寬度的總寬度（320px）

Answer 1

這樣的事情呢？您可以使用顯示器作爲表格CSS屬性。你說你想要跨瀏覽器，但是你沒有說你需要支持哪些版本。

http://jsfiddle.net/9rwQY/3

.menu{ 
    display : table; 
    background : lightblue; 
    width  : 320px; 
    text-align : center; 
} 
.btn{ 
    display : table-cell; 
    width  : 33%; 
    background : #fff; 
    border  : 1px solid #666; 
    padding : 5px 10px; 
}