今天小编跟大家讲解下有关CSS实现无外边框列表效果 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关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{ width: 325px;}div ul li{ border-bottom: 1px solid red; border-right: 1px solid red; height: 100px; width: 80px; float: left; background: #fff;}html部分：
<div> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul></div>方法二：使用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:nth-child(even){border-right: 0;}li:nth-last-child(2){border-bottom: 0;}li:last-child{border-bottom: 0;}html部分：
<div> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul></div>方法三：使用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; }tr:first-child td,tr:first-child th{ border-top:0px;}tr:last-child td{border-bottom:0px;}td:first-child{ border-left:0;}td:last-child { border-right:0;}html部分：
<table> <tr> <td>11</td> <td>12</td> <td>13</td> </tr> <tr> <td>21</td> <td>22</td> <td>23</td> </tr></table>来源：爱蒂网
