更改内联列表的宽度和高度

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