インラインリストの幅と高さを変更する

Question

幅が330ピクセル、高さが50ピクセルになるインラインリストがあります。しかし、私はそれが私が望む幅/高さにすることができません。それはそれが含んでいる内容と同じくらい大きいだけですが、何が間違っていますか？ 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; 
}