CSS消失的边界线问题

消失的边界线问题

　　看看下图，经常会在一些导航栏中见到，要求每行中最后一列的右边框消失，如何在所有浏览器中最便捷优雅的实现?

　　

　　如果是不需要兼容 IE8- ，那么使用 CSS3 新增的选择器无疑是一种好方法。

　　JavaScript

// 使用伪类选择器，选择第 3n 个元素去掉边框

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

　　当然，如果个数确定也不多，给需要去掉右边框的元素直接添加一个特定的 class 也就完事。或者，使用 table 虽然繁琐一点，不过也能实现。

　　不过这样都不够优雅。

　　这里有个小技巧，就是通过添加反向边框并且增加一个负的 margin 来实现。

　　首先，假定我们的 ul 结构如下：

新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。

1. <div class="ul-container"> 
2.     <ul> 
3.         <li>测试</li> 
4.         <li>消失</li> 
5.         <li>边界线</li> 
6.         <li>右侧</li> 
7.         <li>边界线</li> 
8.         <li>消失</li> 
9.         <li>测试</li> 
10.     </ul> 
11. </div> 

　　如图中所示，假定每行排列 3 个 li ，每个 li 宽 100px ，我们的 ul 和 ul-container 宽度都设为 300px 。

　　最重要的是，每个 li 设置一个左边框而不是右边框：

　　CSS

1. .ul-container, 
2.  
3. 　　ul{ 
4.  
5. 　　width:300px; 
6.  
7. 　　} 
8.  
9. 　　li{ 
10.  
11. 　　float:left; 
12.  
13. 　　width:99px; 
14.  
15. 　　border-left:1px solid #999; 
16.  
17. 　　} 

　　我们会得到如下这样的结果：

　　接下来，我们将容器 ul-container 设置为 overflow:hidden ，并且将 ul 左移一个像素 margin-left:-1px。

　　这样 ul 中第一列的所有边框都因为左移了一像素并且被 overflow:hidden 而消失了，造成了下一个 li 的右边框看着像左边框一样，其实只是个障眼法：

　　CSS

1. .ul-container{ 
2.  
3. 　　overflow:hidden; 
4.  
5. 　　} 
6.  
7. 　　ul{ 
8.  
9. 　　margin-left:-1px; 
10.  
11. 　　} 

　　效果图就如一开始图示所示：

　　

　　这种做法可以适应不同 li 个数不同行数的所有情况，因为每个新添加的 li ，都会生成一个左边框与上一个 li 元素分开，只是在视觉上看上去像是上一个 li 元素的右边框。