html div无边框,CSS实现无外边框列表效果

方法一：使用外层容器切割

给每一个 li 设定右边框和下边框线

把ul放置在一个外层div中，设定div的宽高，通过overflow:hidden将一部分li的边框隐藏

此方法只需要计算父容器的宽高，能应付任何行与列数，推荐使用。

css部分：

body{background: #f3f3f3;}

ul,li{list-style: none; padding: 0; margin: 0;}

div{

width: 323px;

height: 302px;

overflow: hidden;/*超出部分隐藏,切割掉下边框和右边框*/

}

div ul{

/*一个li元素宽度为81px,width大小只要大于(81 x 4)324px,一排就能显示四个li元素*/

width: 325px;

}

div ul li{

/*设置右边框和下边框*/

border-bottom: 1px solid red;

border-right: 1px solid red;

height: 100px;

width: 80px;

float: left;

background: #fff;

}

方法二：使用css选择器

给每一个 li 设定右边框和下边框线

通过css选择器li:nth-child(even)隐藏偶数li的右边框

通过css选择器li:nth-last-child(2)和li:last-child隐藏最后两个li的下边框

此方法仅适用于每行固定显示两个li的情况，不需要计算宽高，也不需要设置父容器。

css部分：

body{background: #f3f3f3;}

ul,li{list-style: none; padding: 0; margin: 0;}

ul{width: 210px;}

/* 设置右边框和下边框 */

li{width: 100px; height: 80px; float: left; background: #fff; border-width: 0 1px 1px 0; border-color: #ff3333; border-style: solid; }

/* 去除偶数li的右边框 */

li:nth-child(even){border-right: 0;}

/* 去除倒数第2个li的下边框 */

li:nth-last-child(2){border-bottom: 0;}

/* 去除最后一个li的下边框 */

li:last-child{border-bottom: 0;}

方法三：使用table

给每一个 li 设定右边框和下边框线

通过css选择器li:nth-child(even)隐藏偶数li的右边框

通过css选择器li:nth-last-child(2)和li:last-child隐藏最后两个li的下边框

css部分：

body{background: #f3f3f3;}

table{width:300px; height: 200px; border-collapse:collapse; }

td{ border:1px solid black; background-color: #fff; text-align: center; }

/* 去除第一行所有td的上边框 */

tr:first-child td,tr:first-child th{ border-top:0px;}

/* 去除最后一行所有td的上边框 */

tr:last-child td{border-bottom:0px;}

/* 去除每一行里第一个td的左边框 */

td:first-child{ border-left:0;}

/* 去除每一行里最后一个td的右边框 */

td:last-child { border-right:0;}

11	12	13
21	22	23