删除最后一个边框底部?

问题描述 投票:4回答:5

我使用li来显示记录列表。

每个李有一个底边:1px纯黑色;

但我不想在李的尽头显示边界?

例:

.test li{
        height:1%;
        overflow:hidden;
        padding:4px 0;
        margin:-1px 0 0;
        border-bottom: 1px solid black;
    }

.test li.last { border-bottom: none;  }

<ul class="test">
  <li> Foo 1 </li>
  <li> Foo 2 </li>
  <li> Foo 3 </li>
</ul>

Foo 3仍显示底部边框。

css html-lists border css-selectors
5个回答
14
投票

您也可以设置顶部边框,并使用兄弟选择器来处理此问题,而无需额外的类:

.test li{
        height:1%;
        overflow:hidden;
        padding:4px 0;
        margin:-1px 0 0;
    }

.test li + li { border-top: 1px solid black;  }

17
投票
.test li{
        height:1%;
        overflow:hidden;
        padding:4px 0;
        margin:-1px 0 0;
        border-bottom: 1px solid black;
    }

.test li:last-child { border-bottom: none;  }

3
投票

将类添加到最后的li或者css3是否可接受

ul.test> li:last-of-type {border-bottom:none}


3
投票

你也可以使用jquery

$('ul li:last-child').css('border-bottom', 'none');

我更喜欢这种方式,因为它意味着你的css中跳跃较少和疯狂的异常异常。


0
投票

请为此添加课程:

li:last-child { border-bottom: none; }

© www.soinside.com 2019 - 2024. All rights reserved.