如何删除导航栏上的最后一个边框？

Question

我有一个网站，导航栏目前看起来像

主页 |新闻 |关于我们 |

如何删除 "About Us" 之后的行？

HTML

<nav>
    <ul>
        <li> 
            <a href="index.php">HOME</a>
        </li>
        <li> 
            <a href="news.php">NEWS</a>
        </li>
        <li> 
            <a href="aboutus.php">ABOUT US</a>
        </li>
    </ul>
</nav>

CSS

nav {
    float:right;
    clear:right;
    width:40%;
    margin:0;
    margin-top:30px;
    margin-right:8%;
}

nav ul {
    margin: 0;
    padding: 0;
    font-family: Microsoft Yi Baiti;
}

nav ul li{
    list-style: none;
}

nav ul li a{
    text-decoration: none;
    float: left;
    display: block;
    padding: 10px 30px;
    color: black;
    border-right: 1px solid #ccc;
}

nav ul li a:hover {
    transition: all .2s ease-in;
    color: rgb(204,204,204);
}


nav li.last {
    border: none ;
}

CSS 中的最后一行我试图删除边框，但不幸的是它不起作用。谁能帮忙？谢谢！

Answer 1

您在 a 标签而不是 li 上有边框。另外 li 没有 last 的 class，所以使用 :last-child。你想这样定位它：

nav li:last-child a {
    border: none;
}

Fiddle: http://jsfiddle.net/pqe9hc6y/

Answer 2

在您的 li 上使用 :last-child 伪 class 并定位锚标签。

像这样：

nav ul li:last-child a{
    border-right: none;
}

如何删除导航栏上的最后一个边框？

How do I remove the last border on my nav bar?

html

css

navigationbar