导航栏填充方法-表格/ CSS / JS

Question

I'm developing a navigation bar for a site that needs ie7>= support. The nav bar can contain any amount of links, and each link can contain different amounts of text, and so can be different sizes. However I'd like the nav bar to automatically space each link out so that they fill the parent container.

Here's a solution using pure css to set the padding on each nav bar: https://jsfiddle.net/n07x8963/4/

#nav_1 li { padding:0px 36px;}

The trouble is this requires padding to be manually specified for each nav bar depending on how many links there are and the width of the text within the links. This has to be done every time the content of the nav bar changes.

A way of doing this automatically is of course to use tables: https://jsfiddle.net/t0t29yne/1/

Or by JavaScript as seen here: https://jsfiddle.net/jtz4thfo/1/

Each of the solutions have advantages / disadvantages, so I'd like to know if anyone has a better solution, or an argument towards using any of the mentioned methods.

Thanks

UPDATE: I've ended up opting for tables, ie7+ browsers get served UL's, LI's with display:table-row, display:table-cell overridden in the CSS.

Where as ie7 get's served actual tables.

I know using Tables for layout is generally seen as wrong, but in this case there is no adequate pure CSS solution so I think it's the best / easiest solution.

Answer 1

In IE7 i suggest using tables for only via CSS will not be possible.

 .nav { width: 600px; height: 20px; background-color: #FF9; } ul { list-style-type: none; padding: 0; margin: 0; display: table; /*IE8+ and non-IE*/ width: 100%; } ul li { background-color: #F9F; display: table-cell; /*IE8+ and non-IE*/ text-align: center; } 

 <div id="nav_1" class="nav"> <ul> <li id="link_1">AAAA</li> <li id="link_2">BB</li> <li id="link_3">CCCCCC</li> <li id="link_4">DDDD</li> <li id="link_5" class="last">EEEEEE</li> </ul> </div> <div id="nav_2" class="nav"> <ul> <li id="link_6">FFFFFF</li> <li id="link_7">GGGG</li> <li id="link_8">HH</li> <li id="link_9">IIIIIII</li> <li id="link_10" class="last">JJJJ</li> </ul> </div>