CSS實現無外邊框列表效果

kbyyd24 發布于2019-04-23 11:46 / 918人閱讀

摘要：方法一使用外層容器切割方法一使用外層容器切割給每一個設定右邊框和下邊框線把放置在一個外層中，設定的寬高，通過將一部分的邊框隱藏此方法只需要計算父容器的寬高，能應付任何行與列數，推薦使用。

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

給每一個 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>11td>
        <td>12td>
        <td>13td>
    tr>
    <tr>
        <td>21td>
        <td>22td>
        <td>23td>
    tr>
table>

云服務器 GPU云服務器點擊邊框效果js css效果列表文章js收縮效果效果顯示 css jquery

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/1141.html

css如何實現n宮格布局?

摘要：常見應用場景現在的界面基本都是大同小異宮格布局現在基本成了每個必然的存在帶邊框常用在功能導航頁面無邊框常用在首頁分類設計目標在環境下通過實現宮格并且可以支持有無邊框和每個格是否正方形有邊框且每個格為正方形無邊框最終效果百分比小技巧先解釋一個常見應用場景現在的APP界面基本都是大同小異, 宮格布局現在基本成了每個APP必然的存在. 帶邊框, 常用在功能導航頁面 showImg(htt...

sarva 2019-08-30 15:44 評論0 收藏0
H5多列布局

摘要：多列布局基本概念多列布局類似報紙或雜志中的排版方式，上要用以控制大篇幅文本。在網頁制作時采用層疊樣式表技術，可以有效地對頁面的布局字體顏色背景和其它效果實現更加精確的控制。多列布局基本概念 1、多列布局類似報紙或雜志中的排版方式，上要用以控制大篇幅文本。 2、跨列屬性可以控制橫跨列的數量 /*列數*/ -webkit-column-count: 3; /*分割線*/ -webkit...

Jingbin_ 2019-08-29 16:15 評論0 收藏0
H5多列布局

摘要：多列布局基本概念多列布局類似報紙或雜志中的排版方式，上要用以控制大篇幅文本。在網頁制作時采用層疊樣式表技術，可以有效地對頁面的布局字體顏色背景和其它效果實現更加精確的控制。多列布局基本概念 1、多列布局類似報紙或雜志中的排版方式，上要用以控制大篇幅文本。 2、跨列屬性可以控制橫跨列的數量 /*列數*/ -webkit-column-count: 3; /*分割線*/ -webkit...

mayaohua 2019-08-02 11:08 評論0 收藏0
CSS學習筆記(九) 界面組件之導航菜單

摘要：為了讓包圍列表項，沒有使用，而是使用了，是因為前者會導致后來添加到下拉菜單中的子菜單無法顯示它們最終會顯示在父元素的外面，結果會導致溢出而被隱藏。它與父元素之間的間隙，實際上下拉菜單中第一個鏈接的邊框。菜單由一組鏈接組成。用 HTML 中的列表元素（ul 或 ol）來分組鏈接不僅符合邏輯，而且即使沒有額外的 CSS 也能適當顯示鏈接的層次。默認情況下，由于列表（li）是塊級元素...

pingink 2019-08-28 18:03 評論0 收藏0
從項目中學習HTML+CSS

摘要：最近由于工作原因以及自己的懈怠，已經很久都沒有更新過博客了。所以這次就根據具體的一個網頁項目來梳理一下我這段時間學習這些東西的成果。最近由于工作原因以及自己的懈怠，已經很久都沒有更新過博客了。通過這段時間，我發現堅持一件事情是真的很難，都說萬事開頭難，但是在放棄這件事上好像開頭了后面就順理成章的繼續下去了。中間即使不怎么情愿也在努力的每周更新博客，但是自從9月份以來，第一次因為工作需要加班而...

Lin_R 2019-04-23 13:12 評論0 收藏0