CSS實現無外邊框列表效果

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

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>