css解决li边框重合问题

简介: 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>
目录
相关文章
|
3月前
|
前端开发
css实现伪类三角形气泡框 带边框
css实现伪类三角形气泡框 带边框
30 3
|
3月前
|
前端开发
|
6月前
|
前端开发
CSS新增样式----圆角边框、盒子阴影、文字阴影
CSS新增样式----圆角边框、盒子阴影、文字阴影
|
6月前
|
Web App开发 前端开发 开发者
|
12天前
|
前端开发 开发者
CSS3的常见边框汇总
CSS3的常见边框汇总
13 2
|
1月前
|
前端开发
css边框border(含代码,易懂)
css边框border(含代码,易懂)
|
2月前
css3边框与圆角
css3边框与圆角
31 0
|
3月前
|
前端开发
CSS 做三角边框,实现及原理
CSS 做三角边框,实现及原理
44 0
|
4月前
|
前端开发
CSS:去除input和button边框以及选中时边框默认样式
CSS:去除input和button边框以及选中时边框默认样式
|
前端开发
零基础CSS入门教程(13)——边框样式
可以通过border-style设置边框样式,常用的有solid实线、dotted点线、dashed虚线三种。大家想必发现了,我们在设定边框样式时,一般都会同时设定边框样式、宽度、颜色,如果逐一定义,比较麻烦。我们前几个小结学习了有序列表无序列表,我们这一小节学习一下边框样式很重要的一个知识点。我们本小节学习了边框样式,内容有点多,大家要学会熟练使用,我们在开发中很常用。可以通过border-width调整边框的宽度,单位一般使用px像素。可以使用bolder-color指定边框的颜色,
零基础CSS入门教程(13)——边框样式