css删除最后一个边界线
分类：实例代码
在很多时候需要对一些列表使用线进行分隔。
不过为了美观，最后一个边界线通常要删除，下面就介绍一下如何实现此功能。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
*{
margin:0;
padding:0;
border:0;
font-size:100%;
vertical-align:baseline
}
ol,ul{
list-style:none
}
ul{
width: 300px;
}
li{
float:left;
width:99px;
line-height:30px;
text-align:center;
border-left:1px solid #999;
font-size:18px;
margin-bottom:10px;
}
li:nth-child(1),li:nth-child(4) {
border-left:none;
}
.ul-container {
width: 300px;
margin: 50px auto;
overflow: hidden;
background: #eee;
padding: 10px 0;
}
</style>
</head>
<body>
<div class="ul-container">
<ul>
<li>蚂蚁</li>
<li>部落</li>
<li>js教程</li>
<li>正则教程</li>
<li>canvas</li>
<li>svg</li>
</ul>
</div>
</body>
</html>
非常的简单，只要使用:nth-child(n)选择器去掉对应的边框即可。
关于此选择器可以参阅nth-child() 选择器一章节。
不过有些同学会纠结于选择器的浏览器兼容性问题，如果想要兼容所有的浏览器可以使用如下方式:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
*{
margin:0;
padding:0;
border:0;
font-size:100%;
vertical-align:baseline
}
ol,ul{
list-style:none
}
ul{
width: 300px;
margin-left:-1px;
}
li{
float:left;
width:99px;
line-height:30px;
text-align:center;
border-left:1px solid #999;
font-size:18px;
margin-bottom:10px;
}
.ul-container {
width: 300px;
margin: 50px auto;
overflow: hidden;
background: #eee;
padding: 10px 0;
}
</style>
</head>
<body>
<div class="ul-container">
<ul>
<li>蚂蚁</li>
<li>部落</li>
<li>js教程</li>
<li>正则教程</li>
<li>canvas</li>
<li>svg</li>
</ul>
</div>
</body>
</html>
既然边界线是边框，那么我们就可以通过负外边距方式，向左移动边框宽度的尺寸:
ul{
width: 300px;
margin-left:-1px;
}
然后再给容器元素添加设置一个尺寸，然后添加overflow:hidden，隐藏这个边框即可。
.ul-container {
width: 300px;
margin: 50px auto;
overflow: hidden;
background: #eee;
padding: 10px 0;
}
css删除最后一个边界线，这样的场景在实际项目中还是用的比较多的，关于css删除最后一个边界线就介绍到这了。
css删除最后一个边界线属于前端实例代码，有关更多实例代码大家可以查看。