微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

有趣的 CSS 题目(7):消失的边界线问题

2016-10-21 20:23 前端大全

(点击上方公众号,可快速关注)


作者:伯乐在线专栏作者 - chokcoco

链接:http://web.jobbole.com/88346/

点击 → 了解如何加入专栏作者


开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节。


解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧。


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



所有题目汇总在我的 Github (https://github.com/chokcoco/iCSS/issues/1)。


7、消失的边界线问题


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



如果是不需要兼容 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戳我(http://codepen.io/Chokcoco/pen/RGVRBB)



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


所有题目汇总在我的 Github ,发到博客希望得到更多的交流。


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



专栏作者简介 ( 点击 → 加入专栏作者 


chokcoco:经不住流年似水,逃不过此间少年。

打赏支持作者写出更多好文章,谢谢!



关注「前端大全」

看更多精选前端技术文章

↓↓↓

 
前端大全 更多文章 更快学习 JS 的 6 个简单思维技巧 漫画:如何用 JS 脚本抢月饼? 前端这条路,我们该何去何从(续) JavaScript 浏览器事件解析 彻底理解 JS 中 this 的指向
猜您喜欢 性能测试应该怎么做? Audio Kit 【大宝】你不得不知的几个交互禁忌常识! Linux在线培训班招生介绍 程序员学设计必读:五大误区 & 三大秘籍