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

对于我的网站的主导航，有一个980像素宽的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)。我可以调整李的填充，使它非常接近，但我真正需要的是一种方法，使其伸展自动适应。可能？

编辑
难度1：不能使用表。
难度2：每个nav项目将有不同的宽度，以适应更长和更短的链接名称。

解决方法

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

(或表格布局：对于均匀宽度分布固定：http://jsfiddle.net/thirtydot/jwJBd/59/)

这个won’t work在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/

原文地址：https://www.jb51.cc/css/222204.html