拉伸水平ul以适合div的宽度

Question

对于我的网站的主导航,有一个980px宽的div,主要导航链接为ul.我试图使导航链接拉伸以均匀地适合div的宽度.

<div style="width: 980px;">
<ul id="horizontal-style">
  <li><a href="#">Nav Item</a></li>
  <li><a href="#">Short Item</a></li>
  <li><a href="#">Really Long Nav Item</a></li>
  <li><a href="#">Nav Link</a></li>
  <li><a href="#">Another Link</a></li>
</ul>
</div>

我正在做一些典型的css来横向创建ul列表(float:left,display:block).我可以调整li的填充以使其非常接近,但我真正需要的是一种使其拉伸以适应自动的方法.可能？

编辑 难度1:无法使用表格.难度2:每个导航项目的宽度不同,以适应更长和更短的链接名称.

Answer 1

这是最简单的方法:http://jsfiddle.net/thirtydot/jwJBd/

(或table-layout: fixed用于均匀宽度分布:http://jsfiddle.net/thirtydot/jwJBd/59/)

这在IE7中不起作用.

#horizontal-style {
    display: table;
    width: 100%;
    /*table-layout: fixed;*/
}
#horizontal-style li {
    display: table-cell;
}
#horizontal-style a {
    display: block;
    border: 1px solid red;
    text-align: center;
    margin: 0 5px;
    background: #999;
}

_{编辑前的旧答案:http://jsfiddle.net/thirtydot/DsqWr/}

Answer 2

人们讨厌表格中的非表格数据,但你所要求的正是表格擅长的. <table width="100%">