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. linux杀掉某个进程的脚本

    https://www.cnblogs.com/zeng1994/p/13a2c5a28e55dd3abc2c75a4fb80371a.html awk的说明: https://www.cnblogs ...

  2. Nginx 反向代理并缓存及缓存清除

    Nginx 反向代理并缓存及缓存清除 原文地址:http://www.cnblogs.com/caoguo/p/5012447.html 一. Nginx 配置 #user nobody; worke ...

  3. 扩增子图表解读1箱线图：Alpha多样性

    箱线图 箱形图(Box-plot)又称为盒须图.盒式图或箱线图,是一种用作显示一组数据分散情况资料的统计图.因形状如箱子而得名.在宏基因组领域,常用于展示样品组中各样品Alpha多样性的分布 第一种情 ...

  4. CAD导出黑白色的pdf（com接口）

    主要用到函数说明: IMxDrawModifyTheColor 接口 用来修改图面所有对象的颜色,把它的颜色都修改成一个指定的值. IMxDrawModifyTheColor::Do 修改颜色,详细说 ...

  5. CAD在网页中如何设置实体闪烁？

    主要用到函数说明: MxDrawXCustomFunction::Mx_TwinkeEnt 闪烁实体.详细说明如下: 参数 说明 McDbObjectId id 被闪烁的实体对象id LONG lCo ...

  6. 【转载】resolv.conf中search作用

    原文地址:http://www.oliver.ren/linux/387.html reslov.conf中的search主要是用来补全hostname的,有时候域名太长,可以做一个短域名做主机名字, ...

  7. img、a标签的使用

    <!doctype html><html><head><meta charset="utf-8"><title>无标题文 ...

  8. 学不好Linux？我们分析看看正确的学习方法是什么-马哥教育

    2018年里,Linux运维的职位数量和平均薪资水平仍然持续了去年的强劲增幅,比很多开发岗位涨的都快.从研究机构的数据来看,Linux职位数量和工资水平涨幅均在IT行业的前五之列,比去年的表现还要好一 ...

  9. Uncaught TypeError: str.replace is not a function

    在做审核页面时,点击审核通过按钮不执行 后来F12控制台查看发现有报错 是因为flisnullandxyzero未执行 然后找出这个方法,此方法为公共方法,将这个方法复制出来 然后使用console. ...

  10. python最好用的IDE及查看源码的方法

    一.PyCharm 很多语言都有比较流行的开发工具,比如JAVA 的Eclipse, C#,C++的VisualStudio,最好的Python 开发IDE就是PyCharm 可以直接调试代码,试运行 ...