i have a large unordered list that needs to be displayed in 2 columns. i tried to make it with floats but i loose to mutch space because of the different heights of the items
then i tried the 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;
}
the problem is that in google chrome i don't see the bullets on the second column
in firefox the columns are displayed correct
what is the problem?
just add a margin left to the list you will see the bullets :
li {
margin-bottom: 1%;
background:#BFBFBF;
margin-left: 10px;
}