魔法CSS（1）——消失的list-style

時間 2019-11-09

標籤 css 消失 list style 欄目 CSS 简体版

原文原文鏈接

有時候一個簡單Bug的出現，每每是因爲一點知識小細節；但每每這點小細節看似簡單，其背後卻很有韻味。

（需求）這部分UI給換成這樣的

看起來相對比較簡單，分析下結構：css
1. 總體爲無序列表，須要保留前置圖標；
2. 每一個列表後跟隨對號，且始終垂直居中；
嗯？首先須要個對號，Css好像能夠實現（那就用不用麻煩用icon了）：
對好實現

// <span className="check" />
.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就是擼。

// 部分代碼，做用就是循環生成列表
<ul className="detail" >
    {
        storeTypeInfoMap[type].map(item => (
            <li>
                {item}
                <span className="check" />
            </li>))
    }
</ul>
// 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;,仍是沒用？

這點小細節1——list-style消失真相

首先想一想是否是更flex佈局有關；由於Flex 佈局，會致使一下屬性失效；可是也只有其子元素的float、clear和vertical-align屬性失效，沒說list-style屬性會失效啊？
問題在於display ？：segmentfault
- 首先display好像有個list-item屬性能夠對非列表元素進行列表佈局，但這裏是直接使用li,不須要display:list-item啊；
- 劃細節重點：
1. li默認有list-style屬性是由於，瀏覽器對li的默認display:list-item,就像內斂元素display默認爲inline；
2. display:flex設爲這個，因此就覆蓋了display:list-item,以致於咱們的list-style失效了。

那麼如何解決？

內嵌一個其餘標籤元素進行flex佈局？

<ul className="detail" >
    {
        storeTypeInfoMap[type].map(item => (
            <li>
                <p className="detail-item">
                    {item}
                    <span className="check" />
                </p>
            </li>))
    }
</ul>

納尼？列表圖標跑到外邊去了？
兩個解決方案：瀏覽器
1. 對ul進行margin把圖標擠進容器
2. li有個list-style-position屬性,設置爲inside將圖標放進li中就好（用這個把）：

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

這點小細節2—list-style內嵌li內部就是其中一員

但li圖標設置內嵌到li內部時，其就至關與是li內部的一個內斂元素；
而後套的P標籤又是塊級元素，設置的flex佈局也爲塊，得獨佔一行就被擠下來了;
既然塊佈局不行，那麼試着將包裹元素P設置爲display: inline-flex看看：

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

後知後覺——inline-xxx

inline-flex和inline-block都是一個inline-xxx序列，都會產生BFC，而且外部表現爲inline特性，內部表現爲block特性；
聯想到咱們平時使用inline-block佈局的場景：好比佈局導航欄，常常會出現寬度明明計算好，可是卻會出現最後一個或幾個被擠到下一行的現象；咱們知道這時因爲inline-block是包含空格、換行符的，因此種種緣由會致使inline-block產生間距，即會出現換行;
這裏列表圖標至關於空格之類的，而咱們沒有對內嵌的<p>inline-block標籤設置寬度（根據內容自動，固然能夠設置寬度%給圖標騰出位置，但這樣處理後期更改寬度相對麻煩），以致於當內容不足以一行容下時，p寬度就別撐到父容器的寬度，便換行；
那麼有什麼辦法解決呢（聯繫下處理inline—block佈局問題的方式）？ide
1. 不設置display爲inline-block,而使用float浮動（這裏顯然不行，咱們須要inline-flex佈局)
2. 設置父元素，white-space: nowrap強制不換行
3. 父元素設置font-size: 0;