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编程问答提出的问题.云 ...
随机推荐
- 体验SqlServer Express 2014
想使用SQLServer Express记录一些数据,但使用起来并不令人愉快.SQLServer Express是一个免费的可用数据库,但似乎设置了一些门槛,多少显得并不真心实意.抛开版本(技术)限制 ...
- id拼接保存到单个字段后作为表连接的查询条件
SELECT q.id, concat(q. NAME) qname, d.id did, d. NAME FROM question_po q LEFT JOIN data_configuratio ...
- 一步一步教你用IntelliJ IDEA 搭建SSM框架（2）——配置mybatis-geneator
我们要搭建整个SSM框架,所以要继续上篇文章没有完成的工作,下面配置mybatis-geneator,自动生成mybatis代码. 在上篇文章中的pom.xml的配置文件中已经加了mybatis-ge ...
- tomcat 编码设置
在Tomcat8.0之前的版本,如果你要向服务器提交中文是需要转码的(如果你没有修改server.xml中的默认编码),因为8.0之前Tomcat的默认编码为ISO8859-1. POST方式提交 r ...
- Self-Attetion
四.self-attention 1.是什么? attention机制通常用在encode与decode之间,但是self-attention则是输入序列与输出序列相同,寻找序列内部元素的关系即 K= ...
- Django - 创建多对多及增加示例
创建多对多: 方式一: 自定义关系表 备注:自定义表Host.Application,通过自定义表,将表Host和Application进行关联(通过外键方式工): 执行语句:python manag ...
- 第六节：numpy之数组拼接
- 【codeforces 508A】Pasha and Pixels
[题目链接]:http://codeforces.com/contest/508/problem/A [题意] 让你在一个n*m的方格上给方格染色; 顺序给出染色的k个格子 如果在某一时刻 有一个2* ...
- 【codeforces 796A】Buying A House
[题目链接]:http://codeforces.com/contest/796/problem/A [题意] 让你选一个最靠近女票的,且能买的房子; 输出你和你女票的距离; [题解] 枚举 [Num ...
- Tomcat 7源码学习笔记 -9 tomcat重启后session仍然保留
使用Tomcat 7缺省的配置,tomcat关闭后重新启动,发现原来的session没有被删掉,用原来的request获取session仍然可以取到.但是并没有配置session持久化. 原因如下: ...