So much for saying something is easy ... either it isn't easy, or I'm missing something blindingly obvious ...

I want to change a bulleted list (nav menu) so that it becomes a horizontal list, stretched to fill the full width available with even spacing around each item. Some items have much longer labels than others, so a set width is not going to work.

Aha, I think, that sounds just the job for display:table, so I set up a proof-of-concept page (http://getdown.org.uk/sitepoint/display-table.htm), but it's not working how I wanted it to. It's just stacking one list item on top of another, and appears to be completely ignoring the table stuff. Compatibility tables tell me that this should work on IE8, so I assume there's something I've done wrong...

Can anyone see my mistake? Or have I completely misunderstood how it is supposed to function?