4

I have a navigation bar with links inside and its around the height I'd like it right now but I want the buttons to be evenly spaced but text-align:justify; isn't working. I'm I doing something wrong?

http://jsfiddle.net/xuEY6/

Jim Jones
  • 2,568
  • 6
  • 26
  • 43

4 Answers4

12

Add

#navigation:after { /* Justify last line */
    content: '';
    display: inline-block;
    width: 100%;
}
#navigation { /* Fix added space */
    height: 1.15em;
    line-height: 1.15;
}

Demo

Oriol
  • 274,082
  • 63
  • 437
  • 513
  • 2
    Thanks, but why the heck does this work? do the a elements just need something to scale against? – Jim Jones Apr 13 '14 at 02:50
  • 7
    @SpencerKillen `text-align: justify` doesn't justify the last line. Then, you can add a pseudo-element with `width:100%` which will fall to the next line, so the line you want to justify won't be the last one and it will be justified. – Oriol Apr 13 '14 at 03:09
9

If you add: 

text-align-last:justify;

to the #navigation line you will get what you are looking for.

Lee Taylor
  • 7,761
  • 16
  • 33
  • 49
sensor
  • 119
  • 1
  • 6
3

If you are okay without Safari support (as of 2021), there is now a native solution to this, the text-align-last property:

text-align-last: justify;

Apply this to any text and its last (or only) line will be justified, while the regular text-align property affects all lines except the last (or none if it's only one line).

This is supported in all major browsers except Safari. Chrome 47+, Edge 12+, Firefox 49+, and Opera. Even IE 5.5+ supports it(!), but text-align: justify; must also be set to work.

Safari has a bug report to track its status, however it has been the better part of a decade without any updates so Apple really ought to step up its game soon. The bug is marked as "RESOLVED FIXED" but that is not the case.

Keavon
  • 6,837
  • 9
  • 51
  • 79
1

your links need to have width to fill the line. specify the with as a % to fill the line

take a look at this http://getbootstrap.com/components/#nav-justified

Exlord
  • 5,009
  • 4
  • 31
  • 51