3

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?

Xyz
  • 5,955
  • 5
  • 40
  • 58
Burt
  • 7,680
  • 18
  • 71
  • 127
  • 2
    Evenly spaced horizontally or vertically? How about posting an example of what you've done? – j08691 Sep 10 '12 at 00:07
  • 1
    What do you mean by evenly spaced? If you mean that all items have the same width, it's one solution. If you want the spacing between text be the same, it's a totally different solution (and Jeremy's answer below won't apply). – Andrei Volgin Sep 10 '12 at 00:30

2 Answers2

3

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.

Jeremy J Starcher
  • 23,369
  • 6
  • 54
  • 74
  • What does look nice on IE6? Also, `display: inline-block` isn't supported on IE7. – Jared Farrish Sep 10 '12 at 00:11
  • @JaredFarrish -- Getting away from the 'evenly spaced' requirement so you can just do a `display: inline` and let the width adjust itself. If you have to support IE6, you can put in some special override rules under conditional comments. – Jeremy J Starcher Sep 10 '12 at 00:13
  • OH yea, IE7. I keep forgetting that exists. – Jeremy J Starcher Sep 10 '12 at 00:15
  • Well, I don't agree with supporting IE6 (that was a joke), but see [my answer here](http://stackoverflow.com/a/11709780/451969) for how IE7 may be affected. Once IE7 is obsolete, thank God `display: inline-block` will be gospel. – Jared Farrish Sep 10 '12 at 00:15
1

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.

cimmanon
  • 67,211
  • 17
  • 165
  • 171
  • `table-cell` can work, but gets a little weird of the menu items are longer than the viewport. In today's world of handheld mobile devices, one needs to be careful. – Jeremy J Starcher Sep 10 '12 at 18:15