fixed width UL with auto width LI
Posted on 2010-01-06
I have a fixed width CSS menu. I want each menu item to have an auto width. I would also like all the menu items to fill up the entire menu bar.
My menu bar uses <ol> as I feel the menu items should be ordered if CSS is turned off. The width is fixed at 960 pixels.
At the moment I have 4 menu items: Home, Adventures, Why Us and Map (but more can be added).
<li><a href="#">Why Us</a></li>
I would like to have the menu items fill up the entire width of the menu bar so for example, the 4 menu items width's would equal 960px. I read width:auto would achieve this but it doesn't - well not the code I was trying to get working.
Whats your advice?
I do not want to specific a fixed width for each menu item - for example to achieve what i'm doing above each LI width would be 960px / 4 = 240px and this would work fine if i was too only have 4 menu items but this will lead to problems if I add more menu items to the OL.