SOLVED: How to "stretch" li a menuelements horizontal inside an ul?

My code:
ul
li (all LI display:left)
a
/li
li
a
/li
/ul

There are all together 11 li-a floating horizontal. Is there a way to "stretch" the width of the li’s so they fill out the hole width of the ul, regardless of the amount of letters inside each li-a? And without setting a fixed size of the li-a? More like a floating width of the li-a’s. (ul-width=975px)

Thanks.

Instead of floating the <li>’s, you could apply display: table; and table-layout: fixed; to the <ul>:

Then apply display: table-cell; to the <li> elements:

Unsurprisingly, those display selectors don’t work in < ie8

Thank you.

But unfortunately it is still too many who use MSIE7, so therefore I can not go for that solution. Hmm. I’ll give it a try anyway.

Quote from: bob1000 at Nov 18, 2009, 10:05 AM

Instead of floating the <li>’s, you could apply display: table; and table-layout: fixed; to the <ul>

I went for this solution. It works pretty well. You can see it here: http://svalbardturn.no. (There are a couple of MSIE7 issues to solve still, and also some MSIE8 issues).

If you choose i.e. french, you’ll see the menu stretch within the width of the page. (Not in MSIE7, I use a conditional statement here, and load a different CSS for this browser.)