谈谈一些有趣的CSS题目（七）-- 消失的边界线问题

时间 2019-11-19

标签谈谈一些有趣 css 题目消失边界线问题栏目 CSS 繁體版

原文原文链接

开本系列，谈谈一些有趣的 CSS 题目，题目类型天马行空，想到什么说什么，不只为了拓宽一下解决问题的思路，更涉及一些容易忽视的 CSS 细节。css

解题不考虑兼容性，题目天马行空，想到什么说什么，若是解题中有你感受到生僻的 CSS 属性，赶忙去补习一下吧。html

不断更新，不断更新，不断更新，重要的事情说三遍。git

谈谈一些有趣的CSS题目（一）-- 左边竖条的实现方法github

谈谈一些有趣的CSS题目（二）-- 从条纹边框的实现谈盒子模型浏览器

谈谈一些有趣的CSS题目（三）-- 层叠顺序与堆栈上下文知多少布局

谈谈一些有趣的CSS题目（四）-- 从倒影提及，谈谈 CSS 继承 inheritpost

谈谈一些有趣的CSS题目（五）-- 单行居中，两行居左，超过两行省略测试

谈谈一些有趣的CSS题目（六）-- 全兼容的多列均匀布局问题url

全部题目汇总在个人 Github 。spa

七、消失的边界线问题

看看下图，常常会在一些导航栏中见到，要求每行中最后一列的右边框消失，如何在全部浏览器中最便捷优雅的实现？

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

// 使用伪类选择器，选择第 3n 个元素去掉边框
li:nth-child(3n){
  border-right:none;
}

固然，若是个数肯定也很少，给须要去掉右边框的元素直接添加一个特定的 class 也就完事。或者，使用 table 虽然繁琐一点，不过也能实现。

不过这样都不够优雅。

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

首先，假定咱们的 ul 结构以下：

<div class="ul-container">
    <ul>
        <li>测试</li>
        <li>消失</li>
        <li>边界线</li>
        <li>右侧</li>
        <li>边界线</li>
        <li>消失</li>
        <li>测试</li>
    </ul>
</div>

如图中所示，假定每行排列 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;
}

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

Demo戳我

这种作法能够适应不一样 li 个数不一样行数的全部状况，由于每一个新添加的 li ，都会生成一个左边框与上一个 li 元素分开，只是在视觉上看上去像是上一个 li 元素的右边框。

全部题目汇总在个人 Github ，发到博客但愿获得更多的交流。

到此本文结束，若是还有什么疑问或者建议，能够多多交流，原创文章，文笔有限，才疏学浅，文中如有不正之处，万望告知。