2

I'd like to create a horizontal navigation list of links, where the nav links are evenly spaced and take up the full width of the enclosing container <ul>. Nav links can be different widths. The first and last links should line up with the beginning and end of the <ul> respectively (meaning the links aren't centered), like this:

|left side..right side|

link1 link1 link3 link4

Unless I'm mistaken, I don't think there is a way to do this in CSS2. But is there a way to do it in CSS3? Otherwise I'll need to do it in Javascript.

L84
  • 45,514
  • 58
  • 177
  • 257
North Krimsly
  • 879
  • 4
  • 18
  • 33

2 Answers2

6

If you insist on CSS3, you can do it with box-flex. Since this isn't fully implemented in all browsers, the properties still have the -moz and -webkit prefixes.

Here's the CSS to do it:

ul {
  display: box;
}

li {
  box-flex: 1;
}

But since not all browsers use it, you have to add -moz-box-flex, -webkit-box-flex, etc.

Here's a demo: http://jsfiddle.net/tBu4a/9/

Blender
  • 289,723
  • 53
  • 439
  • 496
  • Thanks Blender. This solution seems to have the same issue as robertc's below-- the links do not line up flush with the left and right edges of the container, while being equally spaced. I ended up writing a JQuery script to do this, but if there's a way to do it in CSS3 I'm still interested! – North Krimsly Jun 29 '11 at 15:42
  • What do you mean by that? Can you post your solution? I'm not really understanding what you mean... – Blender Jun 29 '11 at 18:14
  • Blender, sorry if I didn't explain this very well. Please see the comment under robertc that I posted below, for some additional context. – North Krimsly Jun 30 '11 at 15:33
  • Ohhh, ok. For this, you'd need to add alternating blank `li` elements and give them a `box-flex: 1`. The `li`s with the links would just be normal `display: inline-block`s. Let me edit my solution. – Blender Jun 30 '11 at 15:45
5

That's straightforward to do with CSS2:

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

Here's a working example. The problem isn't so much that CSS2 doesn't have a way to do it, it's that IE didn't fully support CSS2 until version 8.

--edit

OK, now I think I understand your requirements:

ul {
    display: table;
    width: 100%;
    border: 0;
    padding: 0;
    background-color: blue;
}
li {
    display: table-cell;
    border: 0;
    padding: 0;
    text-align: center;
}
li:first-child {
    text-align: left;
}
li:last-child {
    text-align: right;
}
a {
    display: block;
    padding: 0.25em 0;
    background-color: white;
    text-decoration: none;
}

Here it is in action. I've zeroed out all the borders and padding as per your comments, you could add some back in but you would, of course, need to zero out the left border/padding of the first link and the right border/padding of the right link using either li:first-child or li:first-child a (and the opposite last-child ones).

robertc
  • 74,533
  • 18
  • 193
  • 177
  • Thanks robertc. That's close, but not quite what I'm looking for. The links in the example you provide do not take up the entire width of the enclosing container (the `
      `). The left and right edges of the first and last link need to be flush with the left and right edges of the enclosing container, while still being evenly spaced. That's the tricky part of this issue.
     – North Krimsly Jun 29 '11 at 15:32
  • @NorthK They do take up the entire available width, but the container has a border on it (so that you can see they're taking up all the available width). Just set all the borders to 0 if you don't want to see them, [this example](http://jsfiddle.net/robertc/LE5YR/3/) demonstrates that if you set a background colour on the `nav` and `ul` elements it doesn't show through behind the `a` elements. – robertc Jun 29 '11 at 16:29
  • Hi robertc, the 'x' in 'link six' should line up flush with the right-hand side of the container, with all links being equally spaced. In the example code at the link you posted, 'link six' does not line up flush with the right-hand side of the container. See [link]http://stackoverflow.com/questions/6513438/jquery-equally-spaced-navigation-links-inside-unordered-list-problem for the Javascript solution I wrote. Still would like to get it to work in CSS though! Thanks again. – North Krimsly Jun 30 '11 at 15:31
  • 1
    Thanks very much for your efforts robertc-- that's really close. But the links aren't spaced equally because of the text-align on the first and last list items. Yet, I understand that the text-aligns are needed so the links line up with the edges of the container. – North Krimsly Jul 07 '11 at 19:01