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. Python基础——列表、元组操作

    列表.元组操作 列表: 列表是Python中最基本的数据结构,列表是最常用的Python数据类型,列表的数据项不需要具有相同的类型.列表中的每个元素都分配一个数字 - 它的位置,或索引,第一个索引是0 ...

  2. C# call Win32 api时，-1如何转换为DWORD

    当使用(uint)-1时,编译器会给出警告:常量-1无法转换为uint,使用unchecked语句重写.DWORD在转换为C#类型时为uint,既然无法使用uint强制转型(-1),那就需要其他办法了 ...

  3. Centos 编译安装Haproxy

    一.环境介绍 1.Centos6 2. haproxy-1.4.25.tar.gz 二.安装 $ curl -O http://haproxy.1wt.eu/download/1.4/src/hapr ...

  4. Please, commit your changes or stash them before you can merge

    参照 : https://blog.csdn.net/iefreer/article/details/7679631 用git pull来更新代码的时候,遇到了下面的问题: error: Your l ...

  5. iptables详解（3）：iptables规则管理

    所属分类:IPtables  Linux基础 在本博客中,从理论到实践,系统的介绍了iptables,如果你想要从头开始了解iptables,可以查看iptables文章列表,直达链接如下 iptab ...

  6. 爬虫文件存储-3：Redis

    前提条件: 安装并运行redis服务端程序,安装RedisPy库 说明:Redis 是 StrictRedis 的子类,它的主要功能是用于向后兼容旧版本库里的几个方法,官方推荐使用 StrictRed ...

  7. 举枪消灭"烂代码"的实战案例

    前言 之前我写过一篇如何少写PHP "烂"代码 https://segmentfault.com/a/11...感觉很多新人对此不太理解.今天以打卡功能为例,去讲解其中的奥秘.那篇 ...

  8. axios的基本概念和安装以及配置方法

    ajax:异步请求,是一种无需再重新加载整个网页的情况下,能够更新部分网页的技术 axios:用于浏览器和node.js的基于promise的HTTP客户端 1.从浏览器制作XMLHttpReques ...

  9. 8.3 操作MongoDB数据库

    一项权威调查显示,在大数据时代软件开发人员必备的十项技能中MongoDB数据库名列第二,仅次于HTML5.MongoDB是一个基于分布式文件存储的文档数据库,可以说是非关系型(Not Only SQL ...

  10. 【Codeforces 340D】Bubble Sort Graph

    [链接] 我是链接,点我呀:) [题意] 让你根据冒泡排序的规则 建立一张图 问你这张图的最大独立子集的大小 [题解] 考虑a[i]会和哪些点连边? 必然是在a[i]左边且比它大的数字以及在a[i]右 ...