列表li边框重合问题

在我们写东西的时候经常要用到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属性）；

现在附上完整的代码如下：

<!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>
</html>

列表li边框重合问题相关推荐

css技巧之如何实现ul li边框重合
提到边框重合,我们不妨打开淘宝首页浏览主体分类内容板块瞧瞧---亲,你看到了,正是这个,边框重合.其实我们不难发现,这个效果并不难,只是我们没有真正的动手做过而已,所以不知道怎么做,那么下面就是一个很 ...
css解决li边框重合问题
我直接写了个案例,先看下效果图: 下面是html代码: <!DOCTYPE html> <html><head><meta charset="utf ...
用ul li实现边框重合并附带鼠标经过效果
边框重合这个效果并不难,只是我们没有真正的动手做过而已,下面让我们来谈谈用ul li如何实现边框重合,并附带鼠标经过效果 1 <!DOCTYPE html> 2 <html lang ...
html之解决边框重合问题，鼠标移动文字上文字抖动问题
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
table里的th和td加了边框后，他是两个边框重合的，1PX就变成了2PX
table里的th和td加了边框后,他是两个边框重合的,1PX就变成了2PX,解决方法 .table{border-collapse: collapse;border-spacing: 0; } .t ...
JS点击列表li获取li的id
点击列表li获取li的id <div><ul id="test1"><li id="1">我是list1</li> ...
html的列表样式修改,list-style是设置列表li标签样式
一.list-style浸染与用途 list-style是设置列表li的格式.例如li后面为阿拉伯数字.圆点.实心圆.图片.空心圆.大写英翰墨母.大写英文字母.古板的亚美尼亚数字等. 更多可见:< ...
html li 怎么合并,HTML—CSS-case（合并boder / 滑动门 / 去除li边框 /css三角形原理）...
1.实现多个div盒子横排列,鼠标点上去后显示border,相连的border合并. :利用position:relative的层级比标准流高(后来居上原则),与margin-left:-1px: 若 ...
修复IE下列表 li 底部空行Bug
在IE6及更低版本中,如果在 li 元素中包含 display: block 的元素时,li 元素之间的空格将会转换为一个空行,夹在每个 li 的中间. 假设使用上一节的HTML结构来制作垂直导航,为 ...

列表li边框重合问题

列表li边框重合问题相关推荐

最新文章

热门文章