html - css masonry 无序列表项

Question

我有一个很大的无序列表，需要在 2 列中显示。 我试着用花车来做，但由于元素的高度不同，我松散了空间

然后我尝试了 pure css masonry layout

HTML

<ul>
 <li> Airbag pentru sofer ; inteligent, airbag pentru pasager ; cu buton deactivare inteligent  </li><li> Airbag lateral in fata  </li><li> Airbag-uri cortina din fata pana in spate  </li><li> Control electronic al tractiunii  </li><li> ESP  </li><li> Servodirectie asistata electric, variabila in functie de viteza  </li><li> Asistent plecare in panta  </li><li> ABS Frana de mana electrica  </li><li> Aer conditionat automat si pe doua zone  </li><li> Sistem Audio cu RDS cu radio AM/FM ecran tactil color si ecran color  </li><li> Comenzi audio pe volan  </li><li> Conexiuni pentru AUX si USB Bluetooth pentru telefon si include streaming audio  </li><li> 7 difuzoare  </li><li> 1 ecran multifunctional tactil, 7,0  </li><li> Cruise control  </li><li> Computer de bord include viteza medie, consum mediu, consum instantaneu si autonomie ramasa  </li><li> Start/Stop  </li><li> Faruri cu cu lentile focalizante si bec halogen halogen Lumini de zi  </li><li> Oglinzi exterioare reglabile electric, incalzite si in culoarea caroseriei </li><li> Geamuri electrice fata si spate  </li><li> Insertii crom In jurul geamurilor laterale  </li><li> Stergatoare cu senzor ploaie  </li><li> Volan imbracat in piele, multifunctional, cu reglare pe inaltime si cu reglare in adancime  </li><li> Tapiterie din stofa cu piele sintetica  </li><li> Senzor presiune pneuri afiseaza presiunea cu senzor montat pe jante  </li><li> Cotiera centrala fata  </li><li> Cotiera centrala spate  </li><li> Scaun sofer individual, reglabil electric, 2 reglaje electrice cu reglaj: manual, scaun pasager individual cu reglaj: manual  </li><li> Scaune spate rabatabile 60/40 , cu 0 reglaje electrice  </li><li> Inchidere centralizata din telecomanda  </li><li> Pregatire isofix  </li><li> Jante fata si spate din aliaj , diametru 18 inchi, latime 8,5 inchi  </li><li> Anvelope fata, spate, 245 mm latime, 45% profil si rating W ; index incarcare: 96 conventionale, (date oficiale) si 18 inchi diametru  </li><li> Mase: masa maxima autorizata (kg): 2.015, masa neta (kg): 1.366, masa maxima pentru remorca cu frane (kg): 1.405, masa maxima pentru remorca fara frane (kg): 730 si EU  </li><li> Garantie: durata luni: 24, sau km: Nelimitat  </li><li> Asistenta rutiera: durata luni: 12, sau km: Nelimitat</li>
</ul>

CSS

ul {
    width: 100%;
    max-width: 700px;
    margin: 2em auto;

    column-count: 2;
    column-gap: 1%;
    column-width: 50%;
}

li {
    margin-bottom: 1%;
    background:#BFBFBF;
}

问题是在 google chrome 中我没有看到第二列的元素符号

在 firefox 中列显示正确

firefox

chrome

问题是什么？

Answer 1

只需在列表左侧添加边距即可看到元素符号:

li {
    margin-bottom: 1%;
    background:#BFBFBF;
    margin-left: 10px;
}