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>

我打算删除登录旁边的边框，中间的两个将保留，但我找不到答案请帮忙？:)

订购 | 帐户 | 登录

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。