摘要：有時(shí)候一個(gè)簡(jiǎn)單的出現(xiàn)，往往是由于一點(diǎn)知識(shí)小細(xì)節(jié)但往往這點(diǎn)小細(xì)節(jié)看似簡(jiǎn)單，其背后卻頗有韻味。如果這篇文章對(duì)你有所收獲，請(qǐng)留在你的小心心其他推薦你知多少常用操作

有時(shí)候一個(gè)簡(jiǎn)單Bug的出現(xiàn)，往往是由于一點(diǎn)知識(shí)小細(xì)節(jié)；但往往這點(diǎn)小細(xì)節(jié)看似簡(jiǎn)單，其背后卻頗有韻味。

看起來(lái)相對(duì)比較簡(jiǎn)單，分析下結(jié)構(gòu)：

整體為無(wú)序列表，需要保留前置圖標(biāo)；

每個(gè)列表后跟隨對(duì)號(hào)，且始終垂直居中；

嗯？首先需要個(gè)對(duì)號(hào)，Css好像可以實(shí)現(xiàn)（那就用不用麻煩用icon了）：

對(duì)好實(shí)現(xiàn)

// 
.check{
    position: relative;
    display: inline-block;
    width: 16px;
    height: 15px;
    margin: 0 10px;
    &::after{
        content: "";
        position: absolute;
        left:0;
        width: 100%;
        height: 50%;
        border: 2px solid #000;
        border-radius: 1px;
        border-top: none;
        border-right: none;
        background: transparent;
        transform: rotate(-45deg);
    }
}

實(shí)現(xiàn)原理很簡(jiǎn)單，就定個(gè)偽元素設(shè)置寬高形成矩形，然后背景色透明，邊框只保留左和下（其他相鄰也可），最后旋轉(zhuǎn)個(gè)角度就OK；

接下來(lái)，圖標(biāo)跟隨列表始終垂直居中（垂直居中方法比較多，高度不定flex方便點(diǎn)，就他了），li標(biāo)簽內(nèi)元素需要水平兩列布局，文字靠右，對(duì)好靠左垂直居中，話不多說(shuō)提上flex就是擼。

// 部分代碼，作用就是循環(huán)生成列表

    {
        storeTypeInfoMap[type].map(item => (
            

                {item}
                
            
))
    }

// css
.detail {
    font-size: 12px;
    color: $c-gray;
    li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: left;
        line-height: 3em;
        padding-right: 10px;           
        .check{
            position: relative;
            display: inline-block;
            width: 16px;
            height: 15px;
            margin: 0 10px;
            &::after{
                content: "";
                position: absolute;
                left:0;
                width: 100%;
                height: 50%;
                border: 2px solid #000;
                border-radius: 1px;
                border-top: none;
                border-right: none;
                background: transparent;
                transform: rotate(-45deg);
            }
        }
    }
}

出現(xiàn)的界面：

???我的li標(biāo)簽的list-style屬性怎么沒有啦？強(qiáng)制給liul都設(shè)置個(gè)list-style-type: disc;,還是沒用？

首先想想是不是更flex布局有關(guān)；因?yàn)镕lex 布局，會(huì)導(dǎo)致一下屬性失效；但是也只有其子元素的float、clear和vertical-align屬性失效，沒說(shuō)list-style屬性會(huì)失效啊？

問(wèn)題在于display ？：

首先display好像有個(gè)list-item屬性可以對(duì)非列表元素進(jìn)行列表布局，但這里是直接使用li,不需要display:list-item啊；

劃細(xì)節(jié)重點(diǎn)：

li默認(rèn)有list-style屬性是因?yàn)椋瑸g覽器對(duì)li的默認(rèn)display:list-item,就像內(nèi)斂元素display默認(rèn)為inline；

display:flex設(shè)為這個(gè)，所以就覆蓋了display:list-item,以至于我們的list-style失效了。

那么如何解決？

內(nèi)嵌一個(gè)其他標(biāo)簽元素進(jìn)行flex布局？

    {
        storeTypeInfoMap[type].map(item => (
            

                

                    {item}
                    
                
            
))
    }

納尼？列表圖標(biāo)跑到外邊去了？

兩個(gè)解決方案：

對(duì)ul進(jìn)行margin把圖標(biāo)擠進(jìn)容器

li有個(gè)list-style-position屬性,設(shè)置為inside將圖標(biāo)放進(jìn)li中就好（用這個(gè)把）：

吐血，列表圖標(biāo)咋的又給獨(dú)占一行啦？

但li圖標(biāo)設(shè)置內(nèi)嵌到li內(nèi)部時(shí)，其就相當(dāng)與是li內(nèi)部的一個(gè)內(nèi)斂元素；

然后套的P標(biāo)簽又是塊級(jí)元素，設(shè)置的flex布局也為塊，得獨(dú)占一行就被擠下來(lái)了;

既然塊布局不行，那么試著將包裹元素P設(shè)置為display: inline-flex看看：

只有一行時(shí)這里又引出了有意思的display:inline-XXX

inline-flex和inline-block都是一個(gè)inline-xxx序列，都會(huì)產(chǎn)生BFC，并且外部表現(xiàn)為inline特性，內(nèi)部表現(xiàn)為block特性；

聯(lián)想到我們平時(shí)使用inline-block布局的場(chǎng)景：比如布局導(dǎo)航欄，經(jīng)常會(huì)出現(xiàn)寬度明明計(jì)算好，但是卻會(huì)出現(xiàn)最后一個(gè)或幾個(gè)被擠到下一行的現(xiàn)象；我們知道這時(shí)由于inline-block是包含空格、換行符的，所以種種原因會(huì)導(dǎo)致inline-block產(chǎn)生間距，即會(huì)出現(xiàn)換行;

這里列表圖標(biāo)相當(dāng)于空格之類的，而我們沒有對(duì)內(nèi)嵌的

inline-block標(biāo)簽設(shè)置寬度（根據(jù)內(nèi)容自動(dòng)，當(dāng)然可以設(shè)置寬度%給圖標(biāo)騰出位置，但這樣處理后期更改寬度相對(duì)麻煩），以至于當(dāng)內(nèi)容不足以一行容下時(shí)，p寬度就別撐到父容器的寬度，便換行；

那么有什么辦法解決呢（聯(lián)系下處理inline—block布局問(wèn)題的方式）？

不設(shè)置display為inline-block,而使用float浮動(dòng)（這里顯然不行，我們需要inline-flex布局)

設(shè)置父元素，white-space: nowrap強(qiáng)制不換行

父元素設(shè)置font-size: 0;

試試父元素font-size: 0

發(fā)現(xiàn)列表下項(xiàng)的圖標(biāo)沒有了？

發(fā)現(xiàn)：看來(lái)列表的圖標(biāo)相當(dāng)與列表中的一文字，font-size可以控制其大小；

試試父元素li強(qiáng)制不換行？white-space: nowrap

哇！可以了好像，但是文字不換行被擠出去了，這個(gè)怎么回事？

再設(shè)置子元素p強(qiáng)制換行white-space: pre-wrap試試

贊；一個(gè)新的常用需求誕生了（對(duì)好緊隨列表垂直居中）

不對(duì)好像最初的需求還沒有坐呢？（沒辦法那就用第一種處理圖標(biāo)的方法：list-style-position: outside;然后容器ul設(shè)置margin啰）

雖然這只是一個(gè)簡(jiǎn)單的需求，實(shí)現(xiàn)的方法肯定很多，但是每一種方法的背后可以衍生出的知識(shí)點(diǎn)卻是無(wú)盡的；衍生出的每一個(gè)知識(shí)點(diǎn)也許看似簡(jiǎn)單，但其背后的原理細(xì)節(jié)卻是值得研究的。

學(xué)無(wú)止境，積累點(diǎn)滴；把小簡(jiǎn)單變成大簡(jiǎn)單。

如果這篇文章對(duì)你有所收獲，請(qǐng)留在你的小心心！

其他推薦：

React你知多少

Git常用操作