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删除最后一个边界线属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容