0

次のように、ナビゲーション リンクを水平方向に 1 ピクセルの境界線で中央に配置したいと思います。

仕事 | 仕事 | ブログ | について | サービス | コンタクト

現在、私は使用しています：

<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) の後に必然的に表示される境界線を削除するにはどうすればよいですか?

4

1 に答える 1

0

これを試してください - 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疑似セレクターのサポート (IE7 など) が:last-child

于 2012-06-17T21:48:04.210 に答える