CSS实现列表li边框重合问题
CSS实现列表li边框重合问题
在我们写东西的时候经常要用到ul,但是也经常会出现li边框重合的问题，如下图： 
可以看到每个格子的右边框和下边框明显有边框重合现象，这样很影响美观，要解决这个问题其实也很简单；只要给每个li设置css属性 margin：0 0 -width -width 就可以了,其中的width是我们给li设置的边框宽度;
然而单单只设置margin属性有个小bug，那就是当我们鼠标滑过li要显示边框效果时会出现这个情况：
这个时候问题很明显，因为我们想通过设置li的右边框和下边框的margin为负数来实现边框”重叠“，但是当鼠标经过时右边框和下边框被相邻的li”压“在了下面，解决这个问题也很简单，只要用z-index就可以解决了，开始将li的z-index设置为0，让它可以“压”在下面，当鼠标经过时将其z-index设置为1，让其显示；（注意这时记得给li设置position属性，具体原由可以参考我的另一篇博客关于设置z-index层级无效的问题）；
现在附上完整的代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
*{ margin:0; padding:0;}
ul{
width: 520px;
height: 312px;
margin: 50px auto;
}
ul li{
list-style: none;
width: 100px;
height: 100px;
text-align: center;
background-color: #efefef;
float: left;
border: 2px solid #999;
margin: 0 0 -2px -2px;
position: relative;
z-index: 0;
}
ul li:hover{
border: 2px solid red;
z-index: 1;
}
ul li a{
text-decoration: none;
color: #333;
font-size: 40px;
font-weight: bold;
line-height: 100px;
}
</style>
</head>
<body>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<li><a href="#">11</a></li>
<li><a href="#">12</a></li>
<li><a href="#">13</a></li>
<li><a href="#">14</a></li>
<li><a href="#">15</a></li>
</ul>
</body>
</html>CSS实现列表li边框重合问题的更多相关文章
- css技巧之如何实现ul li边框重合
提到边框重合,我们不妨打开淘宝首页浏览主体分类内容板块瞧瞧---亲,你看到了,正是这个,边框重合.其实我们不难发现,这个效果并不难,只是我们没有真正的动手做过而已,所以不知道怎么做,那么下面就是一个很 ...
- 用ul li实现边框重合并附带鼠标经过效果
边框重合这个效果并不难,只是我们没有真正的动手做过而已,下面让我们来谈谈用ul li如何实现边框重合,并附带鼠标经过效果 <!DOCTYPE html> <html lang=&qu ...
- 使用CSS把ul,li制作成表格
查看效果:http://hovertree.com/texiao/css/7.htm 具体实现请看样式部分. 完整代码: <!DOCTYPE html> <html> < ...
- 一个带标号的CSS文章列表写法
<title>CSS文章列表</title> <style type="text/css"> *{margin:0;padding:0;list ...
- CSS图片列表
1.效果图: 2.Example Source Code <h3><a href="http://www.52css.com/">我爱CSS画廊</a ...
- 如何在Html的CSS中去除<li>标签前面小黑点,和ul、LI部分属性方法
div是很多人做网站都会用到的,但在显示效果时前面总是会有一个小黑点,这个效果很多人不想要,但又不知到如何去除,然而我们可以用以下方法来清除. 1.在CSS中写入代码.找到相关性的CSS,在..li和 ...
- 如何在Html的div+css中去除<li>标签前面小黑点,和ul、LI部分属性方法
div是很多人做网站都会用到的,但在显示效果时前面总是会有一个小黑点,这个效果很多人不想要,但又不知到如何去除,然而我们可以用以下方法来清除. 1.在CSS中写入代码.找到相关性的CSS,在..li和 ...
- 23 , CSS 构造列表与导航
1. 列表图片 2. 背景列表 3. 翻转列表 4. 水平导航 1. 内边距与外边距 Ul { Margin: 0; Padding: 0; } 2. 使用图片作为列表图标 Ul { Margin: ...
- CSS控制列表样式属性list-style有哪些？怎么用？
CSS列表样式属性list-style有哪些类型?不同类型CSS控制列表样式使用时该注意什么? 这是W3Cschool用户Shirley于2016-11-10在W3Cschool编程问答提出的问题.云 ...
随机推荐
- 离线安装Selenium
https://blog.csdn.net/poem_ruru/article/details/79032140
- 12--C++_运算符重载
C++_运算符重载 什么是运算符的重载? 运算符与类结合,产生新的含义. 为什么要引入运算符重载? 作用:为了实现类的多态性(多态是指一个函数名有多种含义) 怎么实现运算符的重载? 方式:类的成员函数 ...
- 【转】SSH中 整合spring和proxool 连接池
[摘要:比来做的一个项目中应用到了毗邻池技巧,大概我们人人比拟认识的开源毗邻池有dbcp,c3p0,proxool.对那三种毗邻池来讲,从机能战失足率来讲,proxool轻微比前两种好些.本日我首要简 ...
- anguar相关
1.创建组件 在某目录下创建组件 ng g c content/membersManage 2.创建服务 在某目录下创建服务 ng g service services/storage 2.创建模 ...
- C lstat major MAJOR 获得设备号
#cat lstat.c #include <sys/types.h> #include <sys/stat.h> #include <unistd.h> #inc ...
- Atcoder Code Festival 2017 qual C 10.22 D题题解
[题意概述] 给出一个只有小写字母的序列,问最少把序列分成几段可以满足每一段可以通过变换成为回文串.变换指的是交换子序列中的字母的位置. [题解] 我们把a~z分别设为2^0~2^25,每个子序列满足 ...
- MongoDB整库备份与还原以及单个collection备份、恢复
备份前的检查> show dbsMyDB 0.0625GBadmin (empty)bruce 0.0625GBlocal (empty)test 0.0625GB> use MyDBsw ...
- NEMA-0183(GPRMC GPGGA)详细解释
NEMA-0183(GPRMC GPGGA)详细解释 nmea数据如下: $GPGGA,121252.000,3937.3032,N,11611.6046,E,1,05,2.0,45.9,M,-5. ...
- [bzoj2989]数列_KD-Tree_旋转坐标系
数列 bzoj-2989 题目大意:题目链接. 注释:略. 想法:显然,我们用x和a[x]两个值建立笛卡尔坐标系. 两个点之间的距离为曼哈顿距离. 修改操作就是插入... 查询操作就是查询一个点周围的 ...
- 使用javacv注意点
由于Android开发需要,使用JavaCV,一开始我配置windows上的Javacv,发现总是出问题,说找不到dll文件.最终发现Opencv库必须解压在C盘根目录下才行. 这个有点坑爹,另外要注 ...