利用负margin-bottom去除列表最后一个li元素的border-bottom
负margin-bottom不会影响元素的实际大小,只会使得后面的元素上移
以第二个里为例,由于第一个li的margin-bottom导致第二个li被上拉1px,第二个li最上面的1px高度覆盖在第一个li之上,但由于background-color:transparent,第一个元素的boder-bottom能够正常显示出来
由于最后一个li -1px的margin-bottom,ul的下部分向上移动1px覆盖在ul的border-bottom之上
适当调大border宽度,便可以看出来,li的灰色border覆盖在ul的黑色border之上,要利用margin-bottom来实现去除最后一个li的
border效果,必须保证二者颜色相近,或者给ul写个overflow:hidden
HTML
<ul id="test">
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
CSS
body,ul,li{margin:;padding:;}
ul,li{list-style:none;}
#test{
margin:20px;
width:390px;
background:#F4F8FC;
border-radius:3px;
border:2px solid #D7E2EC;
}
#test li{
height:25px;
line-height:25px;
padding:5px;
border-bottom:1px dotted #D5D5D5;
margin-bottom:-1px;
}
利用负margin-bottom去除列表最后一个li元素的border-bottom的更多相关文章
- 利用负margin实现元素居中
原理就是对当前元素的position设置为absolute并且相对于父元素定位,先设置left:50%;top:50%使当前元素的左上角处于父元素的中心位置,之后再应用负margin特性使其中心位于父 ...
- 集合求交集 & 去除列表中重复的元素
集合求交集: set1 = {1,2,3,4,5} set2 = {4,5,6,7,8} 交集:set3 = set1 & set2 print(ste3) #结果为{4,5} 或者ste1. ...
- Python 去除列表中重复的元素
Python 去除列表中重复的元素 来自比较容易记忆的是用内置的set l1 = ['b','c','d','b','c','a','a'] l2 = list(set(l1)) print l2 还 ...
- python四种方法实现去除列表中的重复元素
转载:https://blog.csdn.net/together_cz/article/details/76201975 def func1(one_list): ''''' 使用集合,个人最常用 ...
- Python 去除列表中重复的元素(转载http://blog.csdn.net/zhengnz/article/details/6265282)
比较容易记忆的是用内置的set l1 = ['b','c','d','b','c','a','a']l2 = list(set(l1))print l2 还有一种据说速度更快的,没测试过两者的速度 ...
- [转]关于负margin在页面中布局的应用
本文转载自:http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html. 今天再写一个布局的时候用到一个margin-top是负值的情况 ...
- 负值之美:负margin在页面布局中的应用
本文转载自:http://www.topcss.org/?p=94,有修改. 负数给人总是一种消极.否定.拒绝之感,不过有时利用负margin可以达到奇妙的效果,今天就表一表负值在页面布局中的应用.这 ...
- CSS艺术之---负margin之美
CSS中负边距(nagative margin)是布局中常常使用的一个技巧.仅仅要运用得当时常会产生奇异的效果.勘称CSS中的奇淫巧计,非常多CSS布局方法都依赖于负边距.掌握它对于前端童鞋来说还是非 ...
- 负margin在页面布局中的应用
关于负margin的原理建议大家看看这篇文章:http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html#2457812 一. 左右列固定, ...
随机推荐
- IDEA必备插件系列-Rainbow Brackets(彩虹括号)
Rainbow Brackets ,就是彩虹括号,各种鲜明颜色的括号 这个一个开源的项目: https://github.com/izhangzhihao/intellij-rainbow-brack ...
- troubleshoot之:用control+break解决线程死锁问题
目录 简介 死锁的代码 control+break命令 Full thread dump 死锁检测 Heap信息 总结 简介 如果我们在程序中遇到线程死锁的时候,该怎么去解决呢? 本文将会从一个实际的 ...
- JavaScript String.prototype 原型
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head ...
- Java 循环语句及流程控制语句
java循环语句while与do-while 一 while循环 while循环语句和选择结构if语句有些相似,都是根据条件判断来决定是否执行大括号内的执行语句. 区别在于,while语句会反复地进行 ...
- 使用 .NET Core 3.x 构建 RESTFUL Api (续)
关于Entity Model vs 面向外部的Model Entity Framework Core 使用 Entity Model 用来表示数据库里面的记录. 面向外部的Model 则表示要传输的东 ...
- MySQL设置传输包大小
MySQL执行插入或更新时, 当数据量过大时, 可能由于"max_allowed_packet"参数的限制导致执行失败.此时, 可以重新设置该参数的值. "max_all ...
- doT模板双重循环模板渲染方法
doT模板作为一个前端渲染模板,有着非常显著的有点.1.轻量.2.快捷.3.无依赖. 本文介绍一种几乎所有模板都会遇到的问题,双重循环渲染.我们知道在dot模板中循环渲染用的是{{~ it:value ...
- guice的能力简述
guice这个google出的bean容器框架,ES有用到他. 能干什么 是一个bean容器 能AOP 能力细分与使用方式 以module创建injector.可以看成是一个容器.Module需要自定 ...
- IntelliJ Idea如何解决Could not autowire. No beans of 'xxxx' type found的错误提示
问题描述 在idea中进行开发时,经常会遇见Could not autowire. No beans of 'xxxx' type found的错误提示,这样的是不影响程序编译和运行的,但是看起来会很 ...
- MapReduce之MapJoin案例
@ 目录 使用场景 优点 具体办法:采用DistributedCache 案例 需求分析 代码实现 使用场景 Map Join 适用于一张表十分小.一张表很大的场景. 优点 思考:在Reduce 端处 ...