Stretch horizontal ul to fit width of div

Question

For the main nav of my site, there is a 980px wide div with a ul for the main nav links. I am trying to make the nav links stretch to fit the width of the div evenly.

<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> 

I am doing some typical css to make the ul list horizontally (float: left, display: block). I can tweak the padding of the li to get it very close, but what I really need is a way to make it stretch to fit automatically. Possible?

Edit Difficulty 1: Can't use tables. Difficulty 2: Each nav item will be a different width to accommodate longer and shorter link names.

Answer 1

This is the easiest way to do it: http://jsfiddle.net/thirtydot/jwJBd/

(or with table-layout: fixed for even width distribution: http://jsfiddle.net/thirtydot/jwJBd/59/)

This won't work in 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; } 

_{Old answer before your edit: http://jsfiddle.net/thirtydot/DsqWr/}