时间:2021-05-08
先来看看下图,经常会在一些导航栏中见到,要求每行中最后一列的右边框消失,如何在所有浏览器中最便捷优雅的实现?
如果是不需要兼容 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 设置为 overflow:hidden ,并且将 ul 左移一个像素 margin-left:-1px。
这样 ul 中第一列的所有边框都因为左移了一像素并且被 overflow:hidden 而消失了,造成了下一个 li 的右边框看着像左边框一样,其实只是个障眼法:
效果图就如一开始图示所示:
这种做法可以适应不同 li 个数不同行数的所有情况,因为每个新添加的 li ,都会生成一个左边框与上一个 li 元素分开,只是在视觉上看上去像是上一个 li 元素的右边框。
总结
以上就是这篇文章的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
边界线的作用有两点:一、利用边界线圈定主题、划定界限;二、通过改变边界线的颜色和粗细美化导图。软件名称:MindjetMindManager2016(思维导图软
MindManager中,边界线是一个经常被用到的实用工能。它指的是在导图外围添加的线条。边界线的作用有两点,一方面利用边界线圈定主题、划定界限,另一方面通过改
设置wps列宽的方法如下: 1、首先将鼠标移动到页面上两个格子的边界线上;边界上就会有一个小的两边箭头的标志出来; 2、按住鼠标的左键,将跳出来的小图标往左
以Excel为例,表格里的文字全部显示出来的方法:要表格里面的文字显示完整只需要用鼠标拉宽单元格所在列的的边界线即可。 MicrosoftExcel是Micr
cad快速延伸步骤: 1、延伸将一条线延伸到指定的边界线处; 2、可以点击延伸命令,也可以点击修改下拉有个延伸命令,或者也可以输入EX回车执行延伸命令;