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

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

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

 

 

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

 

转载于:https://www.cnblogs.com/hfxm/p/6027155.html