除了最后一项以外，我怎么能有一个边底呢

If i have a ul, how do i set a border-bottom on all the li items except the last one? I'm also trying to make the width of the border 180px. here's my code:

如果我有一个ul，我如何在除了最后一个li项目以外的所有li项目设置一个border-bottom ?我还想把边框的宽度设为180px。这是我的代码:

HTML

HTML

<ul class="sideNav">
  <li><a href="/history.asp">History</a></li>
  <li><a href="/mission.asp">Mission</a></li>
  <li><a href="/associations.asp">Associations</a></li>
  <li><a href="/careers.asp">Careers</a></li>
</ul>

CSS

CSS

.sideNav {
    margin:0;
    padding:0;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    width:216px;
    background-color:#017dc6;
}

.sideNav li {
    list-style-type:none;
    text-align:center;
    text-transform:uppercase;
    width:180px;
}

.sideNav li a {
    border-bottom:1px solid #80bee3;
    width:180px;
    color:#ffffff;
    text-decoration:none;
    display:block;
    padding:18px;
}

4 个解决方案

#1

Without using JavaScript and not having to support IE7 and below (IE8 fails on the second one) there are three options you can use: :first-child, :lastchild and the + selector:

如果不使用JavaScript，不需要支持IE7和以下(IE8在第二个版本上失败)，您可以使用以下三个选项::first-child，:lastchild和+选择器:

:first-child

li { border-top: 1px solid red; }
li:first-child { border-top: none; }

:last-child

li { border-bottom: 1px solid red; }
li:last-child { border-bottom: none; }

+ selector

li+li { border-top: 1px solid red; }

The problems arise if you need to support IE8 and your design doesn't allow you to put a border on the top of your elements as opposed to the bottom.

如果您需要支持IE8，并且您的设计不允许在元素的顶部而不是底部设置边框，那么就会出现问题。

EDIT: The fix to your width issue is that you're adding 180px to 2*18px of the a element, remove the left right padding, and set padding: 18px 0; and you'll be golden. (updated jsfiddle: http://jsfiddle.net/NLLqB/1/)

编辑:解决宽度问题的方法是，向a元素的2*18px添加180px，删除左右填充，设置填充:18px 0;你会是金色的。(更新jsfiddle:http://jsfiddle.net/NLLqB/1/)

Here's a jsfiddle of it: http://jsfiddle.net/NLLqB/

这里有一个jsfiddle: http://jsfiddle.net/NLLqB/

#2

Use :not(:last-child).

用途:没有(胎)。

.sideNav li:not(:last-child) a {
    /* your css here */
}

#3

One way: You can override for the last one using a rule like below with :last-child (Since you tagged css3):

一种方法:您可以使用如下规则来覆盖最后一个:last-child(因为您标记了css3):

.sideNav li:last-child a {
    border-bottom:0px; /*Reset the border for the anchor of last li of this ul*/
}

Demo

演示

There are polyfills available for IE8, but if you can provide a classname for the last one and apply rule to it to reset the style would be of better support, rather than using css3 (if your intention is to support older browsers as well).

IE8中有可使用的polyfill，但是如果您能够为最后一个提供一个类名并应用规则来重置样式，那么将比使用css3更好(如果您的目的也是支持旧的浏览器的话)。

if you are using scripting language like jquery you can easily add a class to the last child as jquery takes care of cross-browser compatibility.

如果您正在使用jquery这样的脚本语言，那么您可以很容易地将一个类添加到最后的子类中，因为jquery会考虑跨浏览器的兼容性。

#4

You can also use in-line CSS to correct this problem.

您还可以使用内联CSS来纠正这个问题。

<li><a style="border-bottom:none" href="/careers.asp">Careers</a></li>

This will remove the border from the "Careers" link. Note that it will only work if you put that code in the <a> tag since that is what the border is being applied to, not the <li>.

这将从“职业”链接中移除边界。注意，只有将该代码放入标记中，它才会工作，因为这是正在应用的边界，而不是

。

。

The downside of this is that if you add something to the list, then the second-to-last list item will have no bottom border, and the last will.

这样做的缺点是，如果向列表中添加一些东西，那么倒数第二个列表项将没有底部边框，而最后一个边框则是。

Not the best solution, but an alternative one that accomplishes the same thing. Cheers!

这不是最好的解决方案，而是实现相同目标的替代方案。干杯!