去掉最后一个列表项的右边框

 如下图,我们经常会在一些导航栏中见到,要求每行中最后一列的右边框消失,该如何实现呢?

css3的nth-child(3n)是一种实现方法,但ie8-不兼容,在不考虑ie8-的情况下,确实是一种不错的方法

li:nth-child(3n){
  border-right:none;
}

另一种方法是利用margin的负值,来隐层最左边的li的左边框:

html结构:

<div class="ul_containter">
   <ul class="ul_noneborder">
    <li><a href="#">列表1</a></li>
    <li><a href="#">列表2</a> </li>
    <li><a href="#">列表3</a> </li>
    <li><a href="#">列表4</a> </li>
    <li><a href="#">列表5</a> </li>
    <li><a href="#">列表6</a> </li>
    <li><a href="#">列表7</a> </li>
    <li><a href="#">列表8</a> </li>
 </ul>
</div>

 

 给每一个li加一个左边框

 

 .ul_containter{overflow:hidden;}
 .ul_noneborder{width:300px;height:150px;background:#ccc; margin: 20px 0;padding:0;list-style: none; }
 .ul_noneborder li{float:left;width:79px;height:30px; padding:0 10px; margin-top:10px; border-left:1px solid #000000; text-align: center}
 .ul_noneborder li a{text-decoration: none;color:#080808;}

 

 

给最外层的ul_containter加了overflow:hidden; 现在就可以让ul往左移动-1px,列表最左边的左边框就达到了隐藏的效果。

 .ul_containter{overflow:hidden;}
 .ul_noneborder{width:300px;height:150px;background:#ccc; margin: 20px 0;padding:0;list-style: none;margin-left:-1px; }
 .ul_noneborder li{float:left;width:79px;height:30px; padding:0 10px; margin-top:10px; border-left:1px solid #000000; text-align: center}
 .ul_noneborder li a{text-decoration: none;color:#080808;}

 

 

这种方法利用的障眼法,给每个列表项加左边框,然后隐藏最左侧项的边框。

 

posted @ 2016-11-03 16:28  蓝眼睛~~  阅读(2937)  评论(0编辑  收藏  举报