去掉最后一個列表項的右邊框

 如下圖，我們經常會在一些導航欄中見到，要求每行中最后一列的右邊框消失，該如何實現呢？

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

 

 

這種方法利用的障眼法，給每個列表項加左邊框，然后隱藏最左側項的邊框。