Question

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

工作|博客|关于|服务| CONTACT

目前，我正在使用：

<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

具有更好的支持（例如IE7）

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

1 个答案: