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.         &l