Evenly spaced list items without JavaScript

Question

I have a design that I have to implement where the designer has a top navigation with evenly spaced items.

I have used an unordered list for this. The only way I could get the items evenly spaced is to use javascript (it is a CMS or the number of LIs can vary).

The problem I have is the LIs start out with no padding then the padding gets added by JS, when you flick between pages you see a noticeable jump.

Is there any way to achieve the same result through HTML, if possible avoiding tables?

Answer 1

Make your list items display:inline-block and then give them a width. The width should be in em units so it resizes with the text.

Won't look nice on IE6, but should be readable/navigable.

Answer 2

If we're talking evenly spaced horizontally, you want display: table-cell

ul { display: table; width: 100% }
li { display: table-cell }

Note that you do need the parent container to be display: table if you want it to take up all of the available width.