如何删除最后一行上所有<li>元素的边框？</li>

Question

我看到了很多解释如何选择列表中的最后一个元素并删除它的边框。另外如何用CSS3选择倒数第二个。但这对我的情况来说还不够。

我有一个水平导航，浮动到两列用于中型视口，具有可变数量的元素。有四个元素，但如果用户是管理员，则导航中有第五个元素。所以，最后一个＆＃34;单元＆＃34;在看起来像两列表的内容中，有<li>或者没有 <div class="horizontal-nav clearfix"> <div class="centering-horizontal-nav"> <nav class="horizontal-nav clearfix"> <ul class="horizontal-nav"> <li> <a>Find models</a> </li> <li> <a>Manage models</a></li> <li> <a>Manage account</a> </li> <li> <a>Administration</a> </li> <li class="nav-no-border-bottom"> <a>Help</a> </li> </ul> <a href="#" id="pull">Menu</a> </nav> </div><!-- end centering horizontal nav --> .centering-horizontal-nav{ height: auto; width: 100%; display: block; } nav.horizontal-nav { height: auto; } nav.horizontal-nav ul { width: 100%; display: block; height: auto; } nav.horizontal-nav li { width: 50%; float: left; position: relative; display: block-inline; border-bottom: 1px solid #bfd1ed; border-right: 1px solid #bfd1ed; margin-left: -1px; line-height: 37px; } nav.horizontal-nav li a { } nav.horizontal-nav a { text-align: left; width: 100%; padding-left: 5%; } nav a#pull { display: none; } div.horizontal-nav { margin-top: 4px; margin-bottom: 4px; border: 1px solid #bfd1ed; } li.nav-no-border-bottom { border-bottom: none; } .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } nav.horizontal-nav{ font-weight: 400; overflow:hidden; } nav.horizontal-nav a { color: #ffffff; } nav.horizontal-nav li a:hover, a:active { /* background-color: #5987d1 */ /* text-decoration: underline; */ } .left-nav{ float:left; background-color:rgba(0,128,0,0.5); /* size parameters (will be overwritten in media queries) */ width: 100%; } div.horizontal-nav{ /* position:relative; background-color: #2662c3; width:100%; */ /* border: solid red 2px; */ overflow:hidden; background-color: #2662c3; } ul{ list-style-type: none; } 。

目前看来这样（没有删除边框）：

我想要的是，当有五个元素时，我可以删除＆＃34;帮助＆＃34;的底部边框。项目。当有四个元素（＆＃34;管理＆＃34;缺失）时，将删除“帮助”和“管理”的下边框。

我试过给＃34;帮助＆＃34;它自己的类，我认为在最坏的情况下，我可以使用JavaScript根据元素的数量将类分配给最后一个或最后两个元素。但不知何故，边界并没有被删除。

顺便说一句，我无法切换到顶部和左边界，因为那时最后一个＆＃34;单元格＃34;在奇数情况下，根本没有边界。

下面的代码块也可以fiddle。

{{1}}

Answer 1

我认为CSS中没有任何方法可以用这种方式选择元素的“底行”。但是，无论容器上有负边距，您都可以遮盖底部边框：

.centering-horizontal-nav {
    margin-bottom: -1px;
}

http://jsfiddle.net/NEc2u/2/