How do I justify a horizontal list?

Question

I have a horizontal navbar like the following:

<ul id = "Navigation">
    <li><a href = "About.html">About</a></li>
    <li><a href = "Contact.html">Contact</a></li>
    <!-- ... -->
</ul>

I use CSS to remove the bullet points and make it horizontal.

#Navigation li
{
    list-style-type: none;
    display: inline;
}

I'm trying to justify the text so each link is spread out evenly to fill up the entirety of the ul's space. I tried adding text: justify to both the li and ul selectors, but they're still left-aligned.

#Navigation
{
    text-align: justify;
}

#Navigation li
{
    list-style-type: none;
    display: inline;
    text-align: justify;
}

This is strange, because if I use text-align: right, it behaves as expected.

How do I spread out the links evenly?

Then Mr thirtydot is the person to see. – Sparkup Jul 29 '11 at 22:42 — Sparkup, Jul 29 '11 at 22:42

score 42 · Accepted Answer · edited Jun 20 '20 at 09:12

Modern Approach - CSS3 Flexboxes

Now that we have CSS3 flexboxes, you no longer need to resort to tricks and workarounds in order to make this work. Fortunately, browser support has come a long way, and most of us can start using flexboxes.

Just set the parent element's display to flex and then change the justify-content property to either space-between or space-around in order to add space between/around the children flexbox items. Then add additional vendor prefixes for more browser support.

Using justify-content: space-between - (example here):

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.menu {
    display: flex;
    justify-content: space-between;
}

<ul class="menu">
    <li>About</li>
    <li>Contact</li>
    <li>Contact Longer Link</li>
    <li>Contact</li>
</ul>

Using justify-content: space-around - (example here):

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.menu {
    display: flex;
    justify-content: space-around;
}

<ul class="menu">
    <li>About</li>
    <li>Contact</li>
    <li>Contact Longer Link</li>
    <li>Contact</li>
</ul>

`justify-content: center` also works. The advantage of that is that you can still use `float: left` to have control over the spacing of the list items per `margin-left`. — PointedEars, Sep 14 '17 at 17:53

score 35 · Answer 2 · edited May 23 '17 at 12:26

35

You need to use a "trick" to make this work.

See: http://jsfiddle.net/2kRJv/

HTML:

<ul id="Navigation">
    <li><a href="About.html">About</a></li>
    <li><a href="Contact.html">Contact</a></li>
    <!-- ... -->
    <li class="stretch"></li>
</ul>

CSS:

#Navigation
{
    list-style-type: none;
    text-align: justify;
    height: 21px;
    background: #ccc
}

#Navigation li
{
    display: inline
}
#Navigation .stretch {
    display: inline-block;
    width: 100%;

    /* if you need IE6/7 support */
    *display: inline;
    zoom: 1
}

Details on IE6/7 trickery: Inline block doesn't work in internet explorer 7, 6

edited May 23 '17 at 12:26

Community

1
1

answered Jul 29 '11 at 22:32

thirtydot

224,678
48
389
349

9

@Maxpm: `text-align: justify` [only works](http://jsfiddle.net/R4449/) when you have more than one line of "text" (or in this case, the `li`s that are `inline`). So, another "line" (`.stretch`) is added. `display: inline-block` allows `width: 100%` to work. – thirtydot Jul 29 '11 at 23:10
5

Heads up - this method kind of freaks out (full-width justifies) if you have more than one word inside each `
` too from what I can tell.

Joshua Stewardson

Nov 05 '13 at 23:35

just a note, that question was asked 2 years ago, but now i believe most will agree that justify is evil in most cases, and should be avoided. Think about really wide block... – ViliusL Nov 06 '13 at 15:44

2

@JoshuaStewardson: Fortunately, that's quite easy to fix: http://jsfiddle.net/thirtydot/2kRJv/822/. I just noticed that someone else also posted the same fix much earlier: http://stackoverflow.com/questions/6879467/how-do-i-justify-a-horizontal-list/14649908#14649908. – thirtydot Nov 07 '13 at 20:04

You can now use `#Navigation:after` in place of `#Navigation .strech`, and dump the extra `

`.

– Zaz Aug 09 '14 at 14:05

Ben Foster · Answer 3 · 2013-07-02T14:19:33.873

26

This can also be achieved using a pseudo element on the ul element:

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: justify;
}

ul:after {
    content: "";
    width: 100%;
    display: inline-block;
}

li {
    display: inline;
}

edited Jul 02 '13 at 14:19

answered Jun 03 '13 at 16:21

Ben Foster

34,340
40
176
285

I know this is old now, but maybe you shouldn't use LESS unless it's within the scope of the question.. Could be confusing to others. Other than that, great alternative to thirtydot's answer, +1 – Bill Jun 25 '13 at 12:55
Good point - to be honest I hadn't even noticed (been a while since I wrote plain ol'CSS). I've updated my answer. – Ben Foster Jul 02 '13 at 14:21
1

Love this, much cleaner and less hacky than the accepted answer. – cfx Jul 31 '13 at 03:51
@gordian: This answer and my answer are virtually the same. The exact same technique is used, the only difference is trivial. I was trying to support IE7 (doesn't support `:after`) which was something I cared about back in 2011. – thirtydot Nov 07 '13 at 20:06
+1 make sure you have spaces between your li elements, or it won't justify – Dunc Nov 12 '13 at 12:05

score 5 · Answer 4 · edited Feb 16 '15 at 16:45

5

Just do:

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

edited Feb 16 '15 at 16:45

Nisse Engström

4,738
23
27
42

answered Feb 16 '15 at 09:47

jakosik

51
1
1

1

You should separate your code from your text, improve the code formatting and explain in a sentence what the CSS does. – Sebastian Zartner Feb 16 '15 at 11:07
While other solutions (not the flexbox one) works only with single word menu links, this one works perfectly! thank you. – Marco May 29 '17 at 12:55
Kindly explain the meaning for width:1% – Sathish Kumar Oct 02 '20 at 14:43

score 4 · Answer 5 · answered Jul 29 '11 at 22:36

4

This might suit your needs:

#Navigation{
}
#Navigation li{
    list-style-type: none;
    text-align: center;
    float: left;
    width: 50%; /*if 2 <li> elements, 25% if 4...*/
}

demo : http://jsfiddle.net/KmqzQ/

answered Jul 29 '11 at 22:36

Sparkup

3,686
2
36
50

Works nicely with the obvious caveat that you must set the correct `width` :) – thirtydot Jul 29 '11 at 22:38

score 3 · Answer 6 · answered Feb 01 '13 at 15:44

HTML

<ul id="Navigation">
    <li><a href="#">The Missing Link</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Riluri</a></li>
    <li><a href="#">Contact us</a></li>
    <!-- ... -->
    <li class="stretch"></li>
</ul>

CSS

#Navigation {
    list-style-type: none;
    text-align: justify;
    height: 21px;
    background: #ccc
}

#Navigation li{
    display: inline
}

#Navigation li a {
    text-align: left;
    display:inline-block;
}

#Navigation .stretch {
    display: inline-block;
    width: 100%;

    /* if you need IE6/7 support */
    *display: inline;
    zoom: 1
}

View demo: http://jsfiddle.net/2kRJv/392/

score 1 · Answer 7 · answered Apr 16 '14 at 15:50

You need to have the <li> elements separated, otherwise the justify won't work.

For example, this:

<ul><li>test</li><li>test</li></ul>


needs to be like this:
<ul>
<li>test</li>
<li>test</li>
</ul>

or at least have spaces between the opening and closing <li> tags.

score 0 · Answer 8 · answered Nov 06 '13 at 15:04

This blog has a satisfyingly robust solution. It needs some slight changes to accommodate a ul/li navigation, though:

#Navigation {
    width: 100%;
    padding: 0;
    text-align: justify;
    font-size: 0;
    font-size: 12px\9; /* IE 6-9 */
}
#Navigation>li {
    font-size: 12px;
    text-align: center;
    display: inline-block;
    zoom: 1;
    *display: inline; /* IE only */
}
#Navigation:after {
    content:"";
    width: 100%;
    display: inline-block;
    zoom: 1;
    *display: inline;
}

http://jsfiddle.net/mblase75/9vNBs/

score 0 · Answer 9 · edited May 23 '17 at 12:02

0

The marked answer does not work if has a white space in it.

The top answer here works with white spaces How do I *really* justify a horizontal menu in HTML+CSS?

edited May 23 '17 at 12:02

Community

1
1

answered Mar 18 '14 at 19:38

artemnih

4,136
2
18
28

score 0 · Answer 10 · answered Sep 02 '21 at 22:58

0

Using CSS Flexboxes

#Navigation {
  width: 100%;
  padding: 0;
  margin: .5rem 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  list-style-type: none;
  color: #ffffff;
}

answered Sep 02 '21 at 22:58

Saleheen Noor

261
2
8

How do I justify a horizontal list?

10 Answers10

Modern Approach - CSS3 Flexboxes

Linked

Related