4

我正在尝试完成一个包含在 div 中的导航列表。

我将它设置为在每个项目的右侧有一个边框以隔开每个项目。我希望仅在中间项目上而不是在最后一项上具有此边框。

HTML：

<div id="container-navigation">
    <ul id="navigation">
        <li><a href="index.html" target="_self">home</a></li>
        <li><a href="aboutus.html" target="_self">about</a></li>
        <li><a href="solutions.html" target="_self">solutions</a></li>
        <li><a href="training.html" target="_self">training</a></li>
        <li><a href="payments.html" target="_blank">payments</a></li>
        <li><a href="contact.html" target="_self">contact</a></li>
    </ul>
</div>

CSS：

#navigation li a {
    color: #ffffff;
    line-height: 22px;
    font-size: 11px;
    text-decoration: none;
    padding: 5px 15px 6px 15px;
    border-right: 1px solid #ffffff;
}

实现这一目标的最佳方法是什么？给最后一个项目一个唯一的类并创建另一个 CSS 条目？

4

6 回答 6

2

正如 thgaskell 所建议的，这是一种方法：

#navigation li a {
    color: green;
    line-height: 22px;
    font-size: 11px;
    text-decoration: none;
    padding: 5px 15px 6px 15px;
    border-right: 1px solid red;
}
#navigation li:last-child a {
    border-right: none;
}

演示：http: //jsfiddle.net/audetwebdesign/G3mD9/

注意：last-child IE9+ 支持伪类，因此对first-childIE7+ 有好处。

于 2013-08-31T01:10:40.837 回答
1

如果是我，我会把边框移到左边而不是右边：

#navigation li a {
    border-left: 1px solid #ffffff;
}

然后我会使用first-child它，因为它具有良好的跨浏览器兼容性。

#navigation li:first-child a {
    border-left: 0 none;
}
于 2013-08-31T01:10:23.623 回答
1

如果您需要支持较旧的浏览器（IE7+ 等），您应该将边框从右侧翻转到左侧，以便您可以使用 css 选择器first-child。

从此更改您当前的CSS：

#navigation li a {
    color: #ffffff;
    line-height: 22px;
    font-size: 11px;
    text-decoration: none;
    padding: 5px 15px 6px 15px;
    border-right: 1px solid #ffffff;
}

至：

#navigation li a {
    color: #ffffff;
    line-height: 22px;
    font-size: 11px;
    text-decoration: none;
    padding: 5px 15px 6px 15px;
    border-left: 1px solid #ffffff;
}

#navigation li:first-child a {
    border-left: none;
}

示例小提琴

于 2013-08-31T01:11:08.253 回答
0

试试 :last-child 选择器，最简单的方法。

#navigation li a:last-child {
     border-right: none;
}
于 2013-08-31T00:55:45.437 回答
0

Create new id or class name to last list item, then give the style like that,

#id_name a { border-right:none !important; }
于 2013-08-31T01:12:19.287 回答
0

作为 :first-child 的替代方法，您还可以使用相邻兄弟选择器来获得 IE7+ 支持。不过，它也需要像其他解决方案一样从右边界更改为左边界。

#navigation li a {
    color: #ffffff;
    line-height: 22px;
    font-size: 11px;
    text-decoration: none;
    padding: 5px 15px 6px 15px;
}
#navigation li + li a {
    border-left: 1px solid #ffffff;
}
于 2013-08-31T01:24:09.010 回答