web-dev-qa-db-fra.com

Les puces disparaissent avec les colonnes CSS3

Les puces sur mes éléments de liste disparaissent lorsque je les convertis en colonnes à l'aide de CSS3. Des idées pourquoi ou des suggestions sur la façon de le corriger?

Voir l'exemple: 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;
}
csshtml-lists
47
Andrew

Je pense que les balles sont là, mais elles sont rendues à gauche de la zone de visualisation. Essayer:

list-style-position: inside;
81
rawb

Ajout des deux padding-left et un négatif text-indent aux éléments de la liste semble produire le résultat souhaité:

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

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

Vous pouvez également ajouter un margin-left à l'élément list (au lieu de la liste) et utilisez outside puces:

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

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

19
Blazemonger

Réglage margin-left:1em fait apparaître les puces sans jouer avec le retrait du texte.

3
Sinister Beard

Après avoir essayé la première réponse ici, j'avais des problèmes avec les éléments de ma liste qui se répandaient sur une deuxième ligne et ne s'alignaient pas. En utilisant column-gap J'ai pu déplacer la deuxième colonne et voir les balles.

Source: 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
kjw