黑马程序员技术交流社区

标题: 【上海校区】CSS实现无外边框列表效果 [打印本页]

---

作者: 不二晨    时间: 2019-3-15 14:56
标题: 【上海校区】CSS实现无外边框列表效果
方法一：使用外层容器切割

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

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

CSS部分：

[url=][/url]
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;}[url=][/url]

HTML部分：

[url=][/url]
<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>[url=][/url]

方法二：使用CSS选择器

• 给每一个 li 设定右边框和下边框线
• 通过CSS选择器li:nth-child(even)隐藏偶数li的右边框
• 通过CSS选择器li:nth-last-child(2)和li:last-child隐藏最后两个li的下边框
  

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

CSS部分：

[url=][/url]
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;}[url=][/url]

HTML部分：

[url=][/url]
<div>        <ul>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>    </ul></div>[url=][/url]

方法三：使用table

• 给每一个 li 设定右边框和下边框线
• 通过CSS选择器li:nth-child(even)隐藏偶数li的右边框
• 通过CSS选择器li:nth-last-child(2)和li:last-child隐藏最后两个li的下边框
  

CSS部分：

[url=][/url]
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;}[url=][/url]

HTML部分：

[url=][/url]
<table>    <tr>        <td>11</td>        <td>12</td>        <td>13</td>    </tr>    <tr>        <td>21</td>        <td>22</td>        <td>23</td>    </tr></table>[url=][/url]

【转载，仅作分享，侵删】

原文地址：https://www.cnblogs.com/deanjs/p/10500181.html

---

作者: 不二晨    时间: 2019-3-20 17:22
奈斯，感谢分享

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2