5

我的代码在这里：

HTML

<nav id="pages">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Donate</a></li>
        <li><a href="#">Video</a></li>
        <li><a href="#" class="last">Contact</a></li>
    </ul>
</nav>  <!-- end pages -->

CSS

#pages{
    position: absolute;
    right: 0;
    top: 70px;

    ul li{
        float: left;
        margin-right: 5px;

        a{
            color: @link-color;
            display: block;
            padding: 0 10px;
            border-radius: 5px;
            font-weight: bold;
        }
    }
}

.last{
    margin-right: 0;
}

我将“last”类添加到最后一个孩子以删除边距但不受影响。我不使用 :last-child 因为它不适用于 IE6 或 IE7。希望有人帮忙？

4

8 回答 8

9

没有必要添加一个“last”类，这样做的最佳实践是：

#pages li:last-child{
    margin-right: 0px;
}

这样，您不必最后创建任何类或任何东西。css 将在 id 页面中查找，最后一个 li (last-child) 并将使其 margin-right 为 0。

于 2015-02-13T00:26:42.120 回答
5

您可以使用:not(:last-child)排除最后一个孩子。因此，对于您的示例，您将拥有：

nav#pages ul :not(:last-child) {
    margin-right: 5px;
}

这将适用margin-right: 5px于除最后一个之外的所有<li> ... </li>.

查看 jsfiddle示例。

于 2016-01-28T00:13:35.690 回答
3

在您的示例中，它li具有右边距，但您已将该类应用于锚链接。

如果您将 HTML 更改为

<li class="last"><a href="#">Contact</a></li>
于 2013-09-25T16:21:24.337 回答
2

整洁的东西，试一试，避免使用:last-child等。

li + li {
  margin-top: 8px;
}
于 2019-08-01T08:12:27.917 回答
1

您需要将类添加到<li>标签，而不是<a>标签。

于 2013-09-25T16:21:43.300 回答
0

将您的 CSS 更改为

nav#pages ul li.last {
    margin-right: 0px;
}

和您的 HTML 到：

<li class="last"><a href="#">Contact</a></li>
于 2013-09-25T16:49:53.573 回答
0

这个基于 LESS 的 CSS 的输出将是其中之一 - 我不确定是哪一个，我对 LESS 不是很熟悉：

#pages > ul > li {
    margin-right: 50px;
}

#pages ul li {
    margin-right: 50px;
}

该类.last是在此层次结构之外定义的。问题是，它“只是”一个类，因此总是比带有 id 的规则具有更低的优先级#pages。

所以要么你像这样定义它完全合格：

#pages ul li.last {
    margin-right: 0;
}

或者您将其添加到另一个定义中：

#pages {
    ul li {}
    ul li.last { margin-right: 0; }
}

演示

先试后买

于 2013-09-25T16:39:33.733 回答
-3

尝试这个：-

.last { margin-bottom: 0 !important; margin-right: 0 !important; }
于 2013-09-25T16:19:13.297 回答