CSS实现无外边框列表效果

2019-03-10 11:49:17来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

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

  1. 给每一个 li 设定右边框和下边框线
  2. 把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选择器

  1. 给每一个 li 设定右边框和下边框线
  2. 通过CSS选择器li:nth-child(even)隐藏偶数li的右边框
  3. 通过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

  1. 给每一个 li 设定右边框和下边框线
  2. 通过CSS选择器li:nth-child(even)隐藏偶数li的右边框
  3. 通过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

下一篇:box-shadow内阴影、外阴影