Question

I got a dynamic horizontal menu. I am trying to make it always 100% of the page width.
So if there are 6 or 8 items or if I want to change the title of each item, I won’t need to resize each item again.

The menu buit as a <ul> <li>Item 1</li> <li>Item 2</li> ... </ul> list. Please see how I would like it to be presented (attached image). Right now in my html the items ends before the full width.

Any ideas how to solve this ? I think if I would turn the menu into table it would fix this, but I preffer not to work with tables in this case.

You can see the website here: enter link description here
Thanks.

Answer 1

Ok. So finally I found the solution for that. CSS only, no JS needed.
It’s quite simple actually:

The wrapping <ul> should have:

display: table

The <li> itself should have:

display: table-cell

and remove it’s float.

That’s all 🙂