Nav-Links horizontal zentriert zwischen Grenze - CSS, HTML-Listen, Grenze, Nav

Ich möchte, dass meine Nav-Links horizontal mit einer 1px Grenze dazwischen zentriert sind, wie:

Arbeit | BLOG | ÜBER | LEISTUNGEN | KONTAKT

Momentan verwende ich:

<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>

und

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;
}

Wie zentriere ich die Grenze zwischen den Links und entferne die Grenze, die nach dem letzten Link (in diesem Fall CONTACT) zwangsläufig angezeigt wird?

Antworten:

0 für die Antwort № 1

Versuche dies - 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;
}

Notiere dass der <li>-s haben jetzt einen linken Rand und es ist aus dem 1. Element entfernt. Das ist, weil die :first-child Pseudo-Selektor hat eine bessere Unterstützung (z. B. IE7) als die :last-child


Speisekarte