Forums

nate22

I have a horizontal list that looks like this:

link one | link two | link three | link four |

I want it to look like this instead (no right border on link 4):

link one | link two | link three | link four

...how can I do this?

EDIT: can NOT be done reliably in a autonav because with the variable widths of the navigation (driven by the anchor text length), the last item could be the end of row one or it maybe at the start of row two, etc.

Paulie_D

There are a number of ways to do it depending on your particular situation.

Apply a special class (perhaps 'last') to that list item which removes the border.

Another is to use 'last-of-type'.

nate22

It's not "last," but it might be "last-of-type" (I'm not sure what that is).

The actual UL goes to multiple lines because it is auto-generated. Is there a way to target the end of each line, not just the last element of the UL?

Paulie_D

We'd need to see your code, a link would be better, to be able to offer specific solutions.

nate22

EDIT: can NOT be done reliably in a autonav because with the variable widths of the navigation (driven by the anchor text length), the last item could be the end of row one or it maybe at the start of row two, etc.

nate22

have I frightened you away with my sloppy code?

Hompimpa

Try something like this:

nav li {
  border-right:1px solid black;
}

nav li:last-child {
  border-right:none;
}

TheDark12

@Hompimpa That is close, but older versions of IE do not support last child.

The workaround is very simple though! Seeing as first child IS supported in IE, simply do the reverse.


nav li {
  border-left: 1px solid black;
}
nav li:first-child {
  border-left: 0;
}

nate22

Thanks, Hompimpa, but that doesn't work because each link is within a separate LI. So the last-child of the LI is also the first.

IE:

< UL>
< LI >< a >link< /a >< /LI >
< LI >< a >link< /a >< /LI >
< LI >< a >link< /a >< /LI >
< /UL >

EDIT: can NOT be done reliably in a autonav because with the variable widths of the navigation (driven by the anchor text length), the last item could be the end of row one or it maybe at the start of row two, etc.

Hompimpa

@TheDark12 Hah! I don't know about that :p

How about this:

nav li a {
  border-left: 1px solid black;
}
nav li:first-child a {
  border-left: 0;
}

nate22

Good thinking, Hopimpa... but, then, will I have the same problem on lines 2 and 3 on the left side rather than the right side? It seems like this new code would just move the | to the left side at the beginning of new lines (except for the first line, of course).

EDIT: can NOT be done reliably in a autonav because with the variable widths of the navigation (driven by the anchor text length), the last item could be the end of row one or it maybe at the start of row two, etc.

treehouse : what would you like to learn today?

Forums

[Solved] UL menu: add | between links but not at ends?