html 边框线消失,科技常识：CSS边界线消失的问题详解

今天小编跟大家讲解下有关CSS边界线消失的问题详解 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS边界线消失的问题详解 的相关资料，希望小伙伴们看了有所帮助。

先来看看下图 经常会在一些导航栏中见到 要求每行中最后一列的右边框消失 如何在所有浏览器中最便捷优雅的实现?

如果是不需要兼容 IE8- 那么使用 CSS3 新增的选择器无疑是一种好方法。

// 使用伪类选择器 选择第 3n 个元素去掉边框

li:nth-child(3n){

border-right:none;

}

当然 如果个数确定也不多 给需要去掉右边框的元素直接添加一个特定的 class 也就完事。或者 使用 table 虽然繁琐一点 不过也能实现。

不过这样都不够优雅。

这里有个小技巧 就是通过添加反向边框并且增加一个负的 margin 来实现。

首先 假定我们的 ul 结构如下：

• 测试
• 消失
• 边界线
• 右侧
• 边界线
• 消失
• 测试

如图中所示 假定每行排列 3 个 li 每个 li 宽 100px 我们的 ul 和 ul-container 宽度都设为 300px 。

最重要的是 每个 li 设置一个左边框而不是右边框：

.ul-container,

ul{

width:300px;

}

li{

float:left;

width:99px;

border-left:1px solid #999;

}

我们会得到如下这样的结果：

接下来 我们将容器 ul-container 设置为 overflow:hidden 并且将 ul 左移一个像素 margin-left:-1px。

这样 ul 中第一列的所有边框都因为左移了一像素并且被 overflow:hidden 而消失了 造成了下一个 li 的右边框看着像左边框一样 其实只是个障眼法：

.ul-container{

overflow:hidden;

}

ul{

margin-left:-1px;

}

效果图就如一开始图示所示：

这种做法可以适应不同 li 个数不同行数的所有情况 因为每个新添加的 li 都会生成一个左边框与上一个 li 元素分开 只是在视觉上看上去像是上一个 li 元素的右边框。

总结

以上就是这篇文章的全部内容 希望本文的内容对大家的学习或者工作能带来一定的帮助 如果有疑问大家可以留言交流。

来源：爱蒂网

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时候联系我们修改或删除，多谢。