html - 将 li 标签与自动宽度与硬编码对齐

Question

我在尝试获取一组 li 标签以对齐我想要的方式时遇到了麻烦。

我有一些基本的 html

<div class="menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>​

和一些CSS

.menu
{
 border:solid 2px red;
 width:520px;
}

ul
{
border:solid 1px #e5e5e5;
height:40px;
margin:0 auto;
list-style:none;
width:500px;
}

li{

text-align:center;
display:inline;
margin:10px;

}

我不想为每个元素硬编码 li 宽度，但我希望 li 元素使用 ul 元素占用所有可用空间。

我需要改变什么才能得到我想要的结果？

我对 jsfiddle 的尝试

Answer 1

如果我理解您的问题可能必须为此使用 display:table 属性。像这样写：

ul
{
    border:solid 1px #e5e5e5;
    height:40px;
    margin:0 auto;
    list-style:none;
    width:500px;
    display:table;
}

li{
 display:table-cell;
 text-align:center;    
}

检查这个http://jsfiddle.net/XmcGh/2/

Answer 2

如果display: table;并且display: table-cell;不削减它，您可以使用百分比宽度和浮动。尽管这种做法违反了您的“无硬代码 li 宽度”要求。尽管百分比会随着各种视口大小而变化。

这也只有在数量<li>不变的情况下才有效。

就像是：

<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>

ul {
width: 100%;
}
li {
float: left;
text-align: center;
width: 30%;
}