更改內聯列表的寬度和高度

Question

我有一個內聯列表，我希望寬度爲330px，高度爲50px。然而，我無法把它變成我想要的寬度/高度。它只與它包含的內容一樣大，我做錯了什麼？ http://jsfiddle.net/Apnx5/

Answer 1

你不能用你當前的html設置來做到這一點。沒有辦法說，我希望這些列表項根據內容動態調整大小，但是如果有剩餘的東西請添加它。

改爲使用display: table-cell。這將需要標記和css更改。不是IE7兼容，但IE7快死了（與IE6不同）。

http://jsfiddle.net/mrtsherman/Apnx5/6/

<div id="listed"> 
     <div class="item"><a href="#"> Profile </a></div> 
     <div class="item"><a href="#"> About </a></div> 
     <div class="item"><a href="#"> Photos </a></div> 
     <div class="item"><a href="#"> My Albumlist </a></div> 
</div>​ 

#listed { 
    height: 50px; 
    width: 330px; 
    display: table; 
} 

div.item { 
    display: table-cell; 
    border: 1px solid gray; 
    vertical-align: middle; 
    text-align: center; 
    border-collapse: collapse; 
}