Question

我努力消除导航列表最后一项的“管道”边界 - 我的代码 -

<div id="header">
    <ul id="menu">
        <li><a href="">Home</a></li>
        <li><a href="">Stories</a></li>
        <li><a href="">Tell your story</a></li>
        <li><a href="">Prizes</a></li>
        <li><a href="">How to tips</a></li>
    </li>
</div>

我的css

#menu li{
    float:left;
    list-style-type: none;
    display:inline;
    padding:0 .9em;
    border-right:1px solid #d2d2d2;;
}
#menu li.last{
    border-right:none;
}

Answer 1

您可以使用adjacent sibling selector仅为具有前一个li兄弟的li元素设置左边框：

#menu li {
    float: left;
    list-style-type: none;
    display: inline;
    padding: 0 .9em;
}
#menu li + li {
    border-left: 1px solid #d2d2d2;
}

Answer 2

对于所有浏览器，将该类添加到最后一个列表项：

<div id="header">
    <ul id="menu">
        <li><a href="">Home</a></li>
        <li><a href="">Stories</a></li>
        <li><a href="">Tell your story</a></li>
        <li><a href="">Prizes</a></li>
        <li class="last"><a href="">How to tips</a></li>
    </ul>
</div>

或者，对于较新的浏览器，更容易使用last-child伪选择器：

#menu li:last-child {
    border-right:none;
}

Answer 3

li.last不存在。如果你想这样做，你必须在最后一个列表项中添加一个类属性：

<div id="header">
    <ul id="menu">
        <li><a href="">Home</a></li>
        <li><a href="">Stories</a></li>
        <li><a href="">Tell your story</a></li>
        <li><a href="">Prizes</a></li>
        <li class="last"><a href="">How to tips</a></li>
    </li>
</div>

和css

#menu li{
    float:left;
    list-style-type: none;
    display:inline;
    padding:0 .9em;
    border-right:1px solid #d2d2d2;;
}
#menu li.last{
    border-right:none;
}

Answer 4

.menu ul li.last{border-right:none;}

使用此代码效果很好。

删除列表导航边框的最后一项

4 个答案: