首页
登录 | 注册

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

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

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

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

谈谈一些有趣的CSS题目(一)-- 左边竖条的实现方法

谈谈一些有趣的CSS题目(二)-- 从条纹边框的实现谈盒子模型

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

谈谈一些有趣的CSS题目(四)-- 从倒影说起,谈谈 CSS 继承 inherit

谈谈一些有趣的CSS题目(五)-- 单行居中,两行居左,超过两行省略

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

所有题目汇总在我的 Github 。

 

7、消失的边界线问题

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

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

如果是不需要兼容 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;
}

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

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

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

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

.ul-container{
  overflow:hidden;
}
ul{
  margin-left:-1px;
}

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

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

Demo戳我

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

 

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

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


相关文章

  • 从css 3d说到空间坐标轴
    有一次我们说到掷骰子那个游戏,当时是用了一个steps属性+雪碧图来制作帧动画,这当然颇为不错,但其实一开始我想的不是这样的,我想的是用真的3d和动画去做,这个方案涉及到不少空间的知识,今天来给大伙好好说说,这css 3d到底怎么玩. 先上 ...
  • Vue 进阶之路(七)
    之前的文章我们对 vue 的列表输出做了介绍,本章我们来看一下 vue 的组件 component. 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head ...
  • 补习系列(20)-大话 WebSocket 与 &quot;尬聊&quot;的实现
    目录 一.聊聊 WebSocket 二.Stomp 是个什么鬼 三.SpringBoot 整合 WebSocket A. 引入依赖 B. WebSocket 配置 C. 控制器 D. 前端实现 四.参考文档 一.聊聊 WebSocket 从 ...
  • 学了很多乱七杂八的东西,但是依然停留在前端,在工作中一直和后端交流,但是不太了解数据库是怎么回事,为了加强学习,准备学习一些关于数据库相关的东西. 说起数据库可能会有很多很多,SQLServer.Oracle.Sybase等等等,还有就是要 ...
  • 一.前言 在日常开发中,我们经常会碰到需要在运行时才知道对象个数的情况,这种情况不能使用数组,因为数组是固定数量的,这个时候我们就会使用集合,因为集合可以存储数量不确定的对象. 集合类是特别有用的工具类,不仅可以存储数量不等的对象,还可以实 ...
  • WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法
    WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNormalMaterial MeshNorm ...

2020 cecdns.com webmaster#cecdns.com
12 q. 0.059 s.
京ICP备10005923号