CSS 边界线隐藏

在开发过程中，常常会遇到在两个标签中加竖线的情况，我们一般都是使用边框来表示，但是在最后一个标签的时候，竖线仍存在就不是我们想要的了，这边介绍两种方法来解决这个问题。

HTML中常见的无序列表

<div class='ul_container'>
	<ul class="list">
	    <li>js</li>
	    <li>html</li>
	    <li>css</li>
	    <li>java</li>
	    <li>php</li>
	    <li>python</li>
	</ul>
</div>

通用的CSS

.list {
  padding:0px;
  float: left;
  background: lightgray;
  width:300px;
}
li{
  list-style-type:none;
  width:99px;
  float: left;
  margin:5px 0px;
  text-align: center;
}

第一种：伪类

ul li{
	border-right: 1px solid black;//边框在右边
}
li:nth-child(3n){
	border:none; //使用伪类，将3n的边框不显示
}

第二种：障眼法

原理： ul中的列表都向左移了一个像素，并且被overflow：hidden给掩盖了

.ul_container ul li{
	border-left:1px solid black;//边框在左边
}
.ul_container{
	overflow: hidden;
}
ul{
	margin-left: -1px;
}