Question

I’d like my nav links to be centered horizontally with a 1px border between, like:

WORK | BLOG | ABOUT | SERVICES | CONTACT

Currently, I’m using:

<nav>
    <ul>
    <li><a href="#">Work</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
</nav>

and

nav {
    float: right;
    margin-right: 40px;
    margin-top: 40px;
}

nav ul li {
    border-right: 1px solid #202020;
    display: inline;
}

nav ul li a {
    font-family: nevis-webfont;
    font-size: 100%;
    font-weight: normal;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-right: 20px;
}

How do I center the border between the links and remove the border that inevitably shows after the final link(in this case, CONTACT)?

Answer 1

Try this – http://jsfiddle.net/qt4SW/

nav {
    float: right;
    margin-right: 40px;
    margin-top: 40px;
}

nav ul li {
    border-left: 1px solid #202020;
    display: inline;
}

nav ul li a {
    font-family: nevis-webfont;
    font-size: 100%;
    font-weight: normal;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin:0 10px;
}

nav ul li:first-child {
    border: 0;
}

Note that the <li>-s now have a left border and it’s removed from the 1st element. That’s because the :first-child pseudo-selector has a better support (e.g. IE7) than the :last-child