11

I've been tasked with generating a horizontal nav list that looks like this:

enter image description here

the point being that the items need to be individually spaced from absolute left to right.

Setting widths is a pain because different browsers appear to interpret them differently. Also, the number of items in this list will change depending on the user.

Any advice would be appreciated!

Following @Dean advice, I've found myself with the below - which is pretty much correct. The only thing I'm thinking is that the left two elements are unfortunately short, hence the large gap. I'm hoping the client will be happy with text-align; center on all the elements with a touch of padding at the side!

enter image description here

Cordial
  • 539
  • 3
  • 7
  • 22

3 Answers3

12

I made a jsFiddle of your menu... everything is perfectly spaced, dynamic, and it goes all the way to the left/right edges without JavaScript or weird/ugly HTML semantic issues. (And it should work in IE 6, if it matters.)

http://jsfiddle.net/bXKFA/2/

jpg demo

HTML:

<div id="menuwrapper">
    <div class="menuitem">CAREERS</div>
    <div class="menuitem">TRADE</div>
    <div class="menuitem">CONTACT US</div>
    <div class="menuitem">PRIVACY POLICY</div>
    <div class="menuitem">T&amp;CS</div>
    <div class="menuitem">SITEMAP</div>
    <div class="menuitem">CORPORATE</div>
    <div class="menuitem">ACCESSIBILITY</div>
    <span class="stretcher"></span>
</div>

CSS:

#menuwrapper {
    height: auto;
    background: #000;
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
}

.menuitem {
    width: auto;
    height: 40px;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1
    background: #000;
    color: yellow;
}

.stretcher {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0;
}

I based it on thirtydot's answer in this thread...

Fluid width with equally spaced DIVs

Community
  • 1
  • 1
Sparky
  • 98,165
  • 25
  • 199
  • 285
  • Glad I could help... but don't forget [thirtydot's original answer](http://stackoverflow.com/questions/6865194/fluid-width-with-equally-spaced-divs) is the basis for this. – Sparky Oct 04 '11 at 16:13
  • 1
    @Mahdi.Montgomery, It worked in IE 6 & 7 when I tested it last year. However, I don't think it matters very much anymore when IE 6 & 7 usage is so low and constantly shrinking. – Sparky Apr 09 '12 at 21:39
  • 1
    If I ruled the world everyone would use Chrome and my clients wouldn't all be on IE7. Hard to convince someone to drop support for a browser they use. – Mahdi.Montgomery Apr 09 '12 at 22:04
  • @Mahdi.Montgomery, One day in the future your client will be the very last IE 7 user on Earth, however, the comments section is not for debate about this... if you have a specific problem with your code not working in IE, just post it as a new question. – Sparky Apr 09 '12 at 22:12
  • Another thought: I verified this working in the actual browser version; **not** in "IE 7 Mode", not in a simulator, and not in an emulator. – Sparky Apr 04 '14 at 21:00
9

You won't be able to get this working well in IE6, but you can use this for all major browsers:

ul {
display: table; 
table-layout: fixed; /* the magic dust that ensure equal width */  
}
li { display: table-cell; text-align: center; }

For IE6 (possibly 7) you will need to use Javascript to calculate the widths dynamically.

Also don't forget to text-align: left your first list item, and text-align: right the last.

Dean
  • 5,884
  • 2
  • 18
  • 24
1

I don't think this needs a list. Couldn't you just create a series of words in a div with text-align: justify?

cwallenpoole
  • 79,954
  • 26
  • 128
  • 166
  • Yes I was thinking of this - using non-breaking spaces for navigation elements with spaces, but it's just not very representative semantically. If I can't find a method to style a list then I'll resort to this! – Cordial Oct 04 '11 at 11:42
  • That doesn't work if the text is smaller then the line: http://jsfiddle.net/hYxvj/ – Šime Vidas Oct 04 '11 at 11:46