摘要：有時候一個簡單的出現，往往是由于一點知識小細節但往往這點小細節看似簡單，其背后卻頗有韻味。如果這篇文章對你有所收獲，請留在你的小心心其他推薦你知多少常用操作

有時候一個簡單Bug的出現，往往是由于一點知識小細節；但往往這點小細節看似簡單，其背后卻頗有韻味。

看起來相對比較簡單，分析下結構：

整體為無序列表，需要保留前置圖標；

每個列表后跟隨對號，且始終垂直居中；

嗯？首先需要個對號，Css好像可以實現（那就用不用麻煩用icon了）：

對好實現

// 
.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);
    }
}

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

接下來，圖標跟隨列表始終垂直居中（垂直居中方法比較多，高度不定flex方便點，就他了），li標簽內元素需要水平兩列布局，文字靠右，對好靠左垂直居中，話不多說提上flex就是擼。

// 部分代碼，作用就是循環生成列表

    {
        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);
            }
        }
    }
}

出現的界面：

???我的li標簽的list-style屬性怎么沒有啦？強制給liul都設置個list-style-type: disc;,還是沒用？

首先想想是不是更flex布局有關；因為Flex 布局，會導致一下屬性失效；但是也只有其子元素的float、clear和vertical-align屬性失效，沒說list-style屬性會失效啊？

問題在于display ？：

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

劃細節重點：

li默認有list-style屬性是因為，瀏覽器對li的默認display:list-item,就像內斂元素display默認為inline；

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

那么如何解決？

內嵌一個其他標簽元素進行flex布局？

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

                

                    {item}
                    
                
            
))
    }

納尼？列表圖標跑到外邊去了？

兩個解決方案：

對ul進行margin把圖標擠進容器

li有個list-style-position屬性,設置為inside將圖標放進li中就好（用這個把）：

吐血，列表圖標咋的又給獨占一行啦？

但li圖標設置內嵌到li內部時，其就相當與是li內部的一個內斂元素；

然后套的P標簽又是塊級元素，設置的flex布局也為塊，得獨占一行就被擠下來了;

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

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

inline-flex和inline-block都是一個inline-xxx序列，都會產生BFC，并且外部表現為inline特性，內部表現為block特性；

聯想到我們平時使用inline-block布局的場景：比如布局導航欄，經常會出現寬度明明計算好，但是卻會出現最后一個或幾個被擠到下一行的現象；我們知道這時由于inline-block是包含空格、換行符的，所以種種原因會導致inline-block產生間距，即會出現換行;

這里列表圖標相當于空格之類的，而我們沒有對內嵌的

inline-block標簽設置寬度（根據內容自動，當然可以設置寬度%給圖標騰出位置，但這樣處理后期更改寬度相對麻煩），以至于當內容不足以一行容下時，p寬度就別撐到父容器的寬度，便換行；

那么有什么辦法解決呢（聯系下處理inline—block布局問題的方式）？

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

設置父元素，white-space: nowrap強制不換行

父元素設置font-size: 0;

試試父元素font-size: 0

發現列表下項的圖標沒有了？

發現：看來列表的圖標相當與列表中的一文字，font-size可以控制其大小；

試試父元素li強制不換行？white-space: nowrap

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

再設置子元素p強制換行white-space: pre-wrap試試

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

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

雖然這只是一個簡單的需求，實現的方法肯定很多，但是每一種方法的背后可以衍生出的知識點卻是無盡的；衍生出的每一個知識點也許看似簡單，但其背后的原理細節卻是值得研究的。

學無止境，積累點滴；把小簡單變成大簡單。

如果這篇文章對你有所收獲，請留在你的小心心！

其他推薦：

React你知多少

Git常用操作