Skip to content
March 24, 2011 / pauldundon

Even Horizontal Spacing of Menu Items with CSS

The problem: You have a web page with a horizontal menu bar and want to distribute the space between the menu items evenly.

Possible approach: The text-align:justify setting will cause the browser to distribute line space evenly amongst line items on all but the last line of a block element. So, we style our menu items as inline-blocks, and put them in a container with an additional element which assures that the menu items will not form the last line of the overall block.

The following code illustrates the principle:

.hMenu
{
    text-align:justify;
    width:800px;
    margin:0 auto;
}

.filler 
{
    width:100%;
    display: inline-block;
    height:0px;
}

.item 
{
    display: inline-block;
}
<div class="hMenu">
<ul>
<li class="item">&nbsp;</li>
<li class="item">Menu Item 1</li>
<li class="item">Menu Item 2</li>
<li class="item">Menu Item 3</li>
<li class="item">Menu Item 4</li>
<li class="item">&nbsp;</li>
<li class="filler"></li>
</ul>
</div>

The width and margin settings in the hMenu class are not part of the solution but are typical of the way the menu would be styled (and make the spacing of the individual items more obvious). The empty items at either end of the list mean that there will in effect be padding to the left of the first item and to the right of the last item, of the same width of the space between the items.

Credit is due to this article for the original solution.

About these ads

7 Comments

Leave a Comment
  1. Dean / Dec 30 2011 5:07 am

    Nice find! You don’t need class item. Just use

    . hMenu li

    in the css.

  2. Mona Reilly / Jan 15 2012 4:16 am

    exactly what I wanted thank you

  3. Dave / Apr 5 2012 11:00 am

    Unfortnuately, this doesn’t not work in IE <9.

    Any solution?

    • pauldundon / Jun 21 2013 8:22 pm

      Regrettably, no, it requires support for inline-block, although IIRC that works in IE8

  4. zaphod1984 / Jun 21 2013 8:48 am

    why is the filler neccessary?
    does it have something to with starting a new row? why does the justify only work when the content has more than one row?

    • pauldundon / Jun 21 2013 8:21 pm

      What we’re doing here is getting the browser to treat the list items as if they were words in a paragraph of text. If you justify a paragraph of text, then the words are spaced evenly on all but the last line, where they are just spaced naturally (think about how a paragraph of text looks in Word, for example). So, we need to use filler to create a “last line” so that our menu items aren’t on the last line.

Trackbacks

  1. WordPress tricks: Make your navigation menu items centered and evenly spaced automatically « Icode4you – PHP, CSS, HTML, and Javascript coding tips, tricks, help, and more

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 215 other followers

%d bloggers like this: