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

对于我的网站的主要导航，有一个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列表（浮法：左，显示：块）。 我可以调整李的填充以使其非常接近，但是我真正需要的是使其自动适应的方法。 可能？

编辑难度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%">

Answer 3

不雅（但有效）的方式：使用百分比

 #horizontal-style { width: 100%; } li { width: 20%; } 

这只适用于5L的例子。 或多或less地修改你的百分比。 如果你的页面上有其他的<li> s，你可以随时分配这些特定的“menu-li”，这样只有它们受到影响。

Answer 4

 #horizontal-style { width: 100%; } li { width: 20%; } 

这种方法不会响应，因为在最小的屏幕上它将会是20％，而这个屏幕会太小，或者覆盖的另一种方式是在不同的断点上进行媒体查询。