CSS实现列表li边框重合问题

2017年04月13日 21:04:18

阅读数：5066

在我们写东西的时候经常要用到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边框重合问题的更多相关文章

  1. css技巧之如何实现ul li边框重合

    提到边框重合,我们不妨打开淘宝首页浏览主体分类内容板块瞧瞧---亲,你看到了,正是这个,边框重合.其实我们不难发现,这个效果并不难,只是我们没有真正的动手做过而已,所以不知道怎么做,那么下面就是一个很 ...

  2. 用ul li实现边框重合并附带鼠标经过效果

    边框重合这个效果并不难,只是我们没有真正的动手做过而已,下面让我们来谈谈用ul li如何实现边框重合,并附带鼠标经过效果 <!DOCTYPE html> <html lang=&qu ...

  3. 使用CSS把ul,li制作成表格

    查看效果:http://hovertree.com/texiao/css/7.htm 具体实现请看样式部分. 完整代码: <!DOCTYPE html> <html> < ...

  4. 一个带标号的CSS文章列表写法

    <title>CSS文章列表</title> <style type="text/css"> *{margin:0;padding:0;list ...

  5. CSS图片列表

    1.效果图: 2.Example Source Code <h3><a href="http://www.52css.com/">我爱CSS画廊</a ...

  6. 如何在Html的CSS中去除<li>标签前面小黑点,和ul、LI部分属性方法

    div是很多人做网站都会用到的,但在显示效果时前面总是会有一个小黑点,这个效果很多人不想要,但又不知到如何去除,然而我们可以用以下方法来清除. 1.在CSS中写入代码.找到相关性的CSS,在..li和 ...

  7. 如何在Html的div+css中去除<li>标签前面小黑点,和ul、LI部分属性方法

    div是很多人做网站都会用到的,但在显示效果时前面总是会有一个小黑点,这个效果很多人不想要,但又不知到如何去除,然而我们可以用以下方法来清除. 1.在CSS中写入代码.找到相关性的CSS,在..li和 ...

  8. 23 , CSS 构造列表与导航

    1. 列表图片 2. 背景列表 3. 翻转列表 4. 水平导航 1. 内边距与外边距 Ul { Margin: 0; Padding: 0; } 2. 使用图片作为列表图标 Ul { Margin: ...

  9. CSS控制列表样式属性list-style有哪些？怎么用？

    CSS列表样式属性list-style有哪些类型?不同类型CSS控制列表样式使用时该注意什么? 这是W3Cschool用户Shirley于2016-11-10在W3Cschool编程问答提出的问题.云 ...

随机推荐

  1. SpringMVC进行json数据交互

    请求key/value.输出json.此方法在开发中比较常用. 在注解适配器中加入messageConverters <!--注解适配器 --> <bean class=" ...

  2. Linux基础篇（1）

    1.计算机硬件的五大单元 五大单元:输入单元,输出单元,CPU内部的控制单元,算术逻辑单元与内存等五大部分. (Ps:CPU实际要处理的数据完全来自于内存) 2.计算机上常用的计算单位 (1)容量单位 ...

  3. 控制台输出(System.out.printf)的使用

    一．  介绍 System.out.printf 与 C语言中的 printf 使用方法类似,可以向控制台(Console) 输出指定格式的内容.使用  System.out.printf 的方法比使 ...

  4. 洛谷——P1757 通天之分组背包

    P1757 通天之分组背包 题目背景 直达通天路·小A历险记第二篇 题目描述 自01背包问世之后,小A对此深感兴趣.一天,小A去远游,却发现他的背包不同于01背包,他的物品大致可分为k组,每组中的物品 ...

  5. OI数学知识清单

    OI常用的数学知识总结 本文持续更新…… 总结一下OI中的玄学知识 先列个单子,(from秦神 数论 模意义下的基本运算和欧拉定理 筛素数和判定素数欧几里得算法及其扩展[finish] 数论函数和莫比 ...

  6. css图片居中(水平居中和垂直居中)

    css图片居中(水平居中和垂直居中) css图片居中分css图片水平居中和垂直居中两种情况,有时候还需要图片同时水平垂直居中,下面分几种居中情况分别介绍. css图片水平居中 利用margin: 0 ...

  7. JQ + PHP + TrackMore物流信息跟踪

    在使用之前,您需要先去trackmore官方网站申请API_KEY,传送门:TrackMore html <script type="text/javascript" src ...

  8. 搭建 Seafile 专属网盘

    准备域名 任务时间:15min ~ 20min 域名注册 如果您还没有域名,可以在腾讯云上选购,过程可以参考下面的视频. 视频 - 在腾讯云上购买域名 域名解析 域名购买完成后, 需要将域名解析到实验 ...

  9. 《奋斗吧！菜鸟》 第八次作业：Alpha冲刺

    项目 内容 这个作业属于哪个课程 任课教师链接 作业要求 https://www.cnblogs.com/nwnu-daizh/p/11012922.html 团队名称 奋斗吧!菜鸟 作业学习目标 A ...

  10. Contest Round #451 (Div. 2)F/Problemset 898F Restoring the Expression

    题意: 有一个a+b=c的等式,去掉两个符号,把三个数连在一起得到一个数 给出这个数,要求还原等式,length <= 1e6 三个数不能含有前导0,保证有解 解法: 铁头过题法,分类然后各种判 ...