css - 导航链接在边框之间水平居中

Question

我希望我的导航链接水平居中，中间有 1px 边框，例如：

工作 | 博客 | 关于 | 服务 | 接触

目前，我正在使用：

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

和

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

如何使链接之间的边界居中并删除最终链接后不可避免地显示的边界（在本例中为 CONTACT）？

Answer 1

试试这个 - 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;
}

请注意，<li>-s 现在有一个左边框，并且它已从第一个元素中删除。那是因为:first-child伪选择器比:last-child