CSS实现无外边框列表效果
2019-03-10 11:49:17来源:博客园 阅读 ()
方法一:使用外层容器切割
- 给每一个 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; }
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的右边框 */ li:nth-child(even){border-right: 0;} /* 去除倒数第2个li的下边框 */ li:nth-last-child(2){border-bottom: 0;} /* 去除最后一个li的下边框 */ 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; } /* 去除第一行所有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;}
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>
原文链接:https://www.cnblogs.com/deanjs/p/10500181.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:前端 - CSS
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点,学前端,基础不好一切白费! 2020-06-11
- ie8下透明度处理 2020-06-11
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash