开发者社区开发与运维文章正文

css解决li边框重合问题

2022-11-26 191

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： css解决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>