开本系列，谈谈一些有趣的 <code>CSS</code> 题目，题目类型天马行空，想到什么说什么，不仅为了拓宽一下解决问题的思路，更涉及一些容易忽视的 CSS 细节。
解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去补习一下吧。
不断更新，不断更新，不断更新，重要的事情说三遍。
<a href="http://www.cnblogs.com/coco1s/p/5893921.html">谈谈一些有趣的CSS题目（一）-- 左边竖条的实现方法</a>
<a href="http://www.cnblogs.com/coco1s/p/5895764.html">谈谈一些有趣的CSS题目（二）-- 从条纹边框的实现谈盒子模型</a>
<a href="http://www.cnblogs.com/coco1s/p/5899089.html">谈谈一些有趣的CSS题目（三）-- 层叠顺序与堆栈上下文知多少</a>
<a href="http://www.cnblogs.com/coco1s/p/5908120.html">谈谈一些有趣的CSS题目（四）-- 从倒影说起，谈谈 CSS 继承 inherit</a>
<a href="http://www.cnblogs.com/coco1s/p/5911946.html">谈谈一些有趣的CSS题目（五）-- 单行居中，两行居左，超过两行省略</a>
<a href="http://www.cnblogs.com/coco1s/p/5915429.html" target="_blank">谈谈一些有趣的CSS题目（六）-- 全兼容的多列均匀布局问题</a>
看看下图，经常会在一些导航栏中见到，要求每行中最后一列的右边框消失，如何在所有浏览器中最便捷优雅的实现？
如果是不需要兼容 <code>IE8-</code> ，那么使用 CSS3 新增的选择器无疑是一种好方法。
当然，如果个数确定也不多，给需要去掉右边框的元素直接添加一个特定的 class 也就完事。或者，使用 table 虽然繁琐一点，不过也能实现。
不过这样都不够优雅。
这里有个小技巧，就是通过添加反向边框并且增加一个负的 <code>margin</code> 来实现。
首先，假定我们的 <code>ul</code> 结构如下：
如图中所示，假定每行排列 3 个 <code>li</code> ，每个 <code>li</code> 宽 <code>100px</code> ，我们的 ul 和 ul-container 宽度都设为 <code>300px</code> 。
最重要的是，每个 <code>li</code> 设置一个左边框而不是右边框：
我们会得到如下这样的结果：
接下来，我们将容器 <code>ul-container</code> 设置为 <code>overflow:hidden</code> ，并且将 <code>ul</code> 左移一个像素 <code>margin-left:-1px</code>。
这样 <code>ul</code> 中第一列的所有边框都因为左移了一像素并且被 <code>overflow:hidden</code> 而消失了，造成了下一个 <code>li</code> 的右边框看着像左边框一样，其实只是个障眼法：
效果图就如一开始图示所示：
<a href="http://codepen.io/Chokcoco/pen/RGVRBB">Demo戳我</a>
这种做法可以适应不同 <code>li</code> 个数不同行数的所有情况，因为每个新添加的 <code>li</code> ，都会生成一个左边框与上一个 <code>li</code> 元素分开，只是在视觉上看上去像是上一个 <code>li</code> 元素的右边框。
到此本文结束，如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。