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. Zabbix 客户端安装教程(第二篇)

    Zabbix 客户端安装教程 blog地址:http://www.cnblogs.com/caoguo [root@localhost ~]# yum install -y gcc make [roo ...

  2. day07-列表类型/元组类型/字典类型/集合类型内置方法

    目录 列表类型内置方法 元组类型内置方法 字典类型内置方法 集合类型内置方法 列表类型内置方法 用来存多个元素,[]内用逗号隔开任意数据类型的元素 1. list()强制类型转换 print(list ...

  3. 【Android】进程间通信IPC——Binder

    Binder是Android中的跨进程通信方式,bindService的时候,服务端返回Binder对象,通过该对象客户端可以从服务端获取数据.在进程间通信IPC——AIDL中创建了ICustomAi ...

  4. MarkDown 语法及使用

    MarkDown #什么是Markdown - 定义 - markdown 是一款轻量级标记语言,功能没有HTML标记语言那么强大 ,Markdown专注书写! #试用人群: 程序员/等计算机爱好者 ...

  5. Linux：安装CentOS 6.x和CentOS 7.x

    1,准备镜像,这里到阿里云镜像网站下载 https://opsx.alibaba.com/mirror 2,安装CentOS6.10 打开vmware workstation--> 典型--&g ...

  6. PAT 1105 Spiral Matrix

    This time your job is to fill a sequence of N positive integers into a spiral matrix in non-increasi ...

  7. Marshal.ReleaseComObject() vs. Marshal.FinalReleaseComObject()

    很简单,不翻译了. If you are using COM components on your .NET code, you might be already aware of the Marsh ...

  8. 协程，greenlet原生协程库, gevent库

    协程简介 协程(coroutine),又称为微线程,纤程,是一种用户级的轻量级线程.协程拥有自己的寄存器上下文和栈. 协程调度切换时,将寄存器上下文和栈保存到其他地方,在切回来时,恢复之前保存的上下文 ...

  9. [bzoj1923]外星千足虫[高斯消元]

    高斯消元解异或方程组 #include <iostream> #include <algorithm> #include <cstdio> #include < ...

  10. J - Simpsons’ Hidden Talents

    Homer: Marge, I just figured out a way to discover some of the talents we weren’t aware we had. Marg ...