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. CAD取Excel表格（com接口）

    1 2 3 4 5 6 7 8 9 10 11 12 MxDrawResbuf ret = (MxDrawResbuf)axMxDrawX1.Call("ExApp_GetExcel&quo ...

  2. 微信小程序animation

    wxml <view class="background" animation="{{rotateData}}"> </view>< ...

  3. springboot 使用idea打包 遇到问题

    找了很久错误后来发现添加这三句话就可以了 需要在项目的pom.xml文件中加上第47-49行的3句话

  4. 名字竞技场 V3.0

    更新内容 1.加入新boss,更高的难度. 2.支持组队模式勒! 3.针对大家反应的人物属性算法进行了修改,现在人物属性更多的取决于名字而不是随机数 4.用户界面优化 INF.代码拿走赞留下,不然你赢 ...

  5. git 的简单使用(2)

    一般情况下,你通常直接在文件管理器中把没用的文件删了,或者用rm命令删了: $ rm test.txt 你可以使用 git rm test.txt来删除 然后用git commit -m " ...

  6. Codeforces Round #413(Div. 1 + Div. 2, combined)——ABCD

    题目在这里 A.Carrot Cakes 乱七八糟算出两个时间比较一下就行了 又臭又长仅供参考 #include <bits/stdc++.h> #define rep(i, j, k) ...

  7. 清北学堂模拟赛d7t3 天上掉馅饼

    题目描述小 G 进入了一个神奇的世界,在这个世界,天上会掉下一些馅饼.今天,天上会随机掉下 k 个馅饼.每次天上掉下馅饼,小 G 可以选择吃或者不吃(必须在下一个馅饼掉下来之前作出选择,并且现在决定不 ...

  8. poj1330 lca 最近公共祖先问题学习笔记

    首先推荐两个博客网址: http://dongxicheng.org/structure/lca-rmq/ http://scturtle.is-programmer.com/posts/30055. ...

  9. sum求和类题目

    今天看到这道题目:http://www.cnblogs.com/charlesblc/p/5930311.html 题目地址:https://leetcode.com/problems/split-a ...

  10. jsp上传下载+SmartUpload插件上传

    使用之前须要自己下载jspSmartUpload.jar包 这里找到一个支持中文的jar包,下载地址例如以下: http://www.blogjava.net/Files/hijackwust/jsm ...