html - 端の片側だけの境界線を削除します（分割境界を維持します）

Question

#order {
    font-family: HelveticaLTStd-Light;
    font-size:13;
    position: absolute;
    right:218;
    top:-5;
}

    #order ul li {
        float:left;
        padding: 5px;
        border-right: 1px solid;
    }

    <div id="order">
    <ul>
        <li>Order</li>
        <li>Account</li>
        <li>Login</li>
    </ul>
    </div>

ログインの横の境界線を削除する予定でしたが、真ん中の2つは残りますが、答えが見つかりません。助けてください？:)

注文| アカウント| ログイン

Answer 1

疑似クラス：first-childを使用して、境界線をまったく持たず、残りの境界線を左境界線にし、事実上、境界線の間の垂直境界線のみを表示することができます。

要素。

   #order ul li:first-child {
    float:left;
    padding: 5px;
    border: none;
}

#order ul li {
    float:left;
    padding: 5px;
    border-left: 1px solid;
}

そして見せるためのフィドル

http://jsfiddle.net/AJW2a/

Answer 2

クラスを指定してから、そのクラスに右境界線を割り当てません。見てみな：

HTML：

<div id="order">
<ul>
    <li>Order</li>
    <li>Account</li>
    <li class="noRight">Login</li>
</ul>
</div>

CSS：

#order {
    font-family: HelveticaLTStd-Light;
    font-size:13;
    position: absolute;
    right:218;
    top:-5;
}

#order ul li {
    float:left;
    padding: 5px;
    border-right: 1px solid;
}

#order ul li.noRight {
    border-right:0;
}

これがJSFiddleです。