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/

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效