Horizontal justified menu in CSS with bar in space

Question

I have used the code from this question to create a horizontal menu where each item is evenly spaced.

Here is my version:

<div id="navigation">
  <ul>
    <li class="first">
      <a href="#" title="Home Page">Home</a>
    </li>
    <li>
      <a href="#">About&ensp;us</a>
    </li>
    <li>
      <a href="#">What&ensp;we&ensp;cover</a>
    </li>
    <li>
      <a href="#">Monitoring&ensp;agencies</a>
    </li>
    <li>
      <a href="#">Publishers</a>
    </li>
    <li>
      <a href="#">News</a>
    </li>
    <li>
      <a href="#">Contact&ensp;us</a>
    </li>
  <span></span>
</ul>
</div>

And the CSS:

#navigation {
    text-align: justify;
}

#navigation ul span {
    display: inline-block;
    position: relative;
    width: 100%;
    height: 0;
}

#navigation ul {
    display: inline;
    list-style: none;
}

#navigation ul li {
    display: inline
}

#navigation ul li a {
    display: inline;
    border-right: solid 1px #ccc;
}

#navigation ul li.last a {
    border-right: none;
}

Is there a way to make the vertical lines move to the right such that they are halfway between the end of the a tags and the end of the li tags?

Here is a fiddle.

I've added an answer here.

Would you consider a solution based on `table-cell` keeping in mind that IE7 will not recognize it without a hack? — Marc Audet, May 15 '13 at 11:15
Will need to look it up, I was thinking of `inline-block`, but I think the hack is similar... — Marc Audet, May 15 '13 at 11:22
This one is tricky. I solved a similar problem a few days ago: http://stackoverflow.com/questions/16501067/fluid-navigation-items-of-different-widths-with-equidistant-spacing/16509901#16509901 and one optioned involved using jQuery/JavaScript — Marc Audet, May 15 '13 at 11:32

score 3 · Answer 1 · edited May 23 '17 at 12:22

Hack Using Extra Elements for the Spacer Motif

Fiddle reference: http://jsfiddle.net/audetwebdesign/bF6ey/

Consider the following HTML:

<div id="navigation">
<ul class="navigation">
  <li class="first">
    <a href="#" title="Home Page">Home</a>
  </li>
  <li class="spacer-motif">|</li>
  <li>
    <a href="#">About&ensp;us</a>
  </li>
  <li class="spacer-motif">|</li>
  ...
  <li class="spacer-motif">|</li>
  <li>
    <a href="#">Contact&ensp;us</a>
  </li>
</ul>
</div>

I added an extra list item between the links: <li class="spacer-motif">|</li> (yes, I cringe also...).

The CSS is as follows:

#navigation {
    padding: 0 20px; /* add spacing at left/right edges of list */
}
#navigation ul {
    display: table;
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}
#navigation ul li {
    display: table-cell;
    text-align: center;
    width: 1%; /* force cell to shrink-to-fit text */
    outline: 1px dashed blue;
}
#navigation ul li.spacer-motif {
    width: 10%; /* force spacers to take up a lot of space */
    outline: none;
}

#navigation ul li a {
    white-space: pre;
}

The layout is based on using table display types.

For ul, use display: table and set the width to 100%. Remember to zero out margin and padding values.

For li, use display: table-cell and text-align: center.

The trick is to force the table cells to shrink-to-fit the text labels by setting width: 1%, and then, for the li.spacer-motif, set width: 10% to force the spacers to expand (evenly) to fill up the line.

To keep the text links from wrapping into 2 or 3 lines, set white-space: pre in the <a> elements (the links).

Cleaning Up The Semantics

The problem here is that the link texts vary in width and this makes it impossible to simply use table-cell's with a right or left border and centered text. The extra spacing will vary among the links and the left/right border will not be evenly spaced between the link texts.

The way around this is to add extra elements. I used a pipe (|) but I suppose you could add a pseudo-element with a 1px border and center it and so on.

However, if the elements are a problem, they could be inserted using jQuery or JavaScript.

IE 7 Support - Hack for CSS
If you need IE7 support, you need to adjust the CSS according to the following:
CSS: table and table-cell replacement for IE7

score 1 · Answer 2 · answered May 15 '13 at 10:03

1

here take a look at this fiddle HERE

I made some small adjustments. I changed display:inline; to float:left; and centerd the text.

The space is coming from the 5px padding i gave to the

ul li a

answered May 15 '13 at 10:03

DiederikEEn

753
8
17

floating stops the menu from being justified across the width of the page. – Ian Warburton May 15 '13 at 10:19

score 0 · Answer 3 · answered May 15 '13 at 09:55

0

I would use display: table on ul and display: table-cell on li for this. and even padding on both sides for the a tag

answered May 15 '13 at 09:55

antpaw

15,444
11
59
88

I don't think that'll work in IE 7. – Ian Warburton May 15 '13 at 09:57
yes it wont, add a width % and float for this – antpaw May 15 '13 at 09:58

score 0 · Answer 4 · answered May 15 '13 at 09:59

0

Depending on the spacing your after, something like this should work:

#navigation ul li a {
    padding-right: 10px;
}

Change the 'px' value to your needs.

answered May 15 '13 at 09:59

Xareyo

1,357
1
13
25

score 0 · Answer 5 · answered May 15 '13 at 10:07

0

You can try something like this:

#navigation ul li a {
    display: inline;
    margin-right: -14px;
    padding-right: 14px;
    border-right: solid 1px #ccc;
}

But it might not be cross-browser.

http://jsfiddle.net/gjFYf/2/

answered May 15 '13 at 10:07

MythThrazz

1,629
17
25

That doesn't seem to work in Chrome. – Ian Warburton May 15 '13 at 10:16
@IanWarburton I tested it in Chrome, so I'm sure it works, however it might not be the result you expected. – MythThrazz May 15 '13 at 10:28

score 0 · Answer 6 · answered May 15 '13 at 10:32

0

I found that padding-right: 30px; in #navigation ul li a worked nicely.

answered May 15 '13 at 10:32

Ian Warburton · Answer 7 · 2013-05-15T11:28:58.997

0

I've got this working by inserting extra list elements into the list and then setting the width of these elements to a single pixel. I've also set their background color and removed the border on the hyperlinks.

New styles...

#navigation ul li.line {
    display: inline-block;
    *display: inline;
    zoom: 1;
    width: 1px;
    background-color: #ccc;
    height: 24px;
    position: relative;
    top: 5px;
}

#navigation ul li a {
    display: inline;
    line-height: 36px;
    height: 36px;
    text-decoration: none;
    font-size: 18px;
    color: #14328C;
    font-weight: bold;
}

New Html snippet...

  <li>
    <a href="default.aspx?tabid=154">Publishers</a>
    <li class="line" />
  </li>

It doesn't work in IE7 though. The text align seems to ignore the extra li unless it contains content.

Its also now semantically incorrect.

Fiddle.

edited May 15 '13 at 11:28

answered May 15 '13 at 11:22

Ian Warburton

15,170
23
107
189

I came up with a similar approach and semantics aside, this is the way to do it. If the links were not in an ordered list, we could use pseudo elements and clean up the semantics. – Marc Audet May 15 '13 at 12:09
@MarcAudet Did you get it working on IE7? – Ian Warburton May 15 '13 at 13:16
I did find a CSS hack/workaround for IE7, I posted a comment in my solution. – Marc Audet May 15 '13 at 13:56
I'm not sure those solutions will work for me. I can't float the li's because it destroys the justified text alignment and the the li's are already floated. I think that I may just turn off the vertical bars on IE7. Screw 'em. – Ian Warburton May 15 '13 at 20:07
Your site will still work without the separators... I agree, there is only so much you can do! You could always try a jQuery assisted solution if someone really insisted. All the best! – Marc Audet May 15 '13 at 22:35
I just suggested jQuery and got an, 'oh nooo...'. ;) – Ian Warburton May 16 '13 at 09:15

Horizontal justified menu in CSS with bar in space

7 Answers7

Hack Using Extra Elements for the Spacer Motif

Cleaning Up The Semantics