如何在除最后一项之外的所有项上都有一个边框底部 [英] How do I have a border-bottom on all except the last item

问题描述

如果我有一个 ul ，我如何在所有 li 最后一个？我也试图使 border 180px的宽度。这是我的代码：

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:

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

.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;
}

推荐答案

支持IE7及以下版本（IE8在第二个版本失败）有三个选项你可以使用：：first-child ，：lastchild 和 + 选择器：

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:

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

：last-child

:last-child

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

+ selector

+ selector

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

问题出现，如果你需要支持IE8和你的设计不允许你把

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.

编辑：
修复你的宽度问题是，你的添加180px到2 * 18px的 a 元素，删除左侧填充，并设置 padding：18px 0; 你会是金的。 （更新jsfiddle： http://jsfiddle.net/NLLqB/1/ ）

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/)

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

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

这篇关于如何在除最后一项之外的所有项上都有一个边框底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！