css解决li边框重合问题
【摘要】 大家好，我是雄雄。我们都知道，在html中，li就是无序列表，也是个块级元素，但是当我们要把所有的li都转换成方块排列时，就会出现一个问题：那就是：当给li加上边框时，会出现重叠的现象，那么，今天我们就来看看，如何解决边框重叠的现象~我直接写了个案例，先看下效果图：下面是html代码：<!DOCTYPE html><html> <head> <meta charset="utf-8" />...
大家好，我是雄雄。
我们都知道，在html中，li就是无序列表，也是个块级元素，但是当我们要把所有的li都转换成方块排列时，就会出现一个问题：
那就是：当给li加上边框时，会出现重叠的现象，那么，今天我们就来看看，如何解决边框重叠的现象~
我直接写了个案例，先看下效果图：
下面是html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>机构动态</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
.test_m ul {
margin: 20px;
width: 630px;
overflow:hidden;
border-top:1px solid black;
}
.test_m ul li{
padding: 10px 20px 11px 20px;
box-sizing: border-box;
float: left;
width: 315px;
height: 111px;
list-style: none;
}
.test_m ul li:nth-child(2n+1){
border:1px solid black;
border-top:0;
}
.test_m ul li:nth-child(2n){
border-bottom:1px solid black;
border-right:1px solid black;
}
</style>
</head>
<body>
<div class="test_m">
<ul>
<li>
菜单1
</li>
<li>
菜单2
</li>
<li>
菜单3
</li>
<li>
菜单4
</li>
</ul>
</div>
</body>
</html>
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
作者其他文章
评论（0）