Domanda I punti elenco scompaiono con le colonne CSS3


I proiettili sulla mia lista spariscono quando li converto in colonne usando CSS3. Qualche idea o suggerimento su come correggerlo?

Vedi l'esempio: http://jsfiddle.net/gduDm/1/

ul li {
    list-style-type: disc !important;
    column-break-inside: avoid;
}
ul {
    list-style-type: disc !important;
    margin-top: 1em;
    column-count: 2;
    column-gap: 0.5em;
}

44
2018-06-01 18:38


origine


risposte:


Penso che i proiettili ci siano, ma vengono renderizzati a sinistra dell'area di visualizzazione. Provare:

list-style-position: inside;

78
2018-06-01 18:40



Aggiungendo entrambi padding-left e un negativo text-indent alla lista gli elementi sembrano produrre il risultato desiderato:

ul li {
    padding-left: 1em;
    text-indent: -1em;
}
ul {
    list-style: inside disc;
}

http://jsfiddle.net/mblase75/gduDm/4/

In alternativa, aggiungere un margin-left per l'elemento list (invece della lista) e use outside pallottole:

ul li {
    margin-left: 1em;
}
ul {
    list-style: outside disc;
}

http://jsfiddle.net/mblase75/gduDm/9/


19
2018-02-20 20:21



Ambientazione margin-left:1em fa apparire i proiettili senza intaccare il rientro del testo.


3
2017-09-28 08:40



Dopo aver provato la prima risposta qui, stavo avendo problemi con le mie voci di lista che si riversavano su una seconda fila e non in fila. utilizzando column-gap Sono stato in grado di spostare la seconda colonna e vedere i proiettili.

Fonte: http://karlikdesign.com/how-to-split-a-list-into-two-columns-with-pure-css/

    <!– CSS CODE –>
    .two-columns {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 40px;
    column-gap: 40px;
    -moz-column-gap: 40px;
}

2
2017-09-28 18:45