Les balles disparaissent avec CSS3 colonnes

Les puces sur ma liste des éléments disparaissent quand je les convertir en colonnes à l'aide de CSS3. Des idées pourquoi ou des suggestions sur la façon de 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;
}
InformationsquelleAutor Andrew | 2012-06-01
  1. 81

    Je pense que les balles sont là, mais ils sont rendus à la gauche de la zone d'affichage. Essayez:

    list-style-position: inside;
    • Oui, c'est juste parce que vous êtes à l'aide de jsFiddle, ce qui ne veut pas montrer les puces correctement. J'aimerais qu'ils se mettre à jour leurs CSS sur il.
    • Il n'ont pas de travail dans mon site code. Le list-style-position fonctionnait parfaitement bien. Merci pour l'aide.
    • Absolument Andrew - content que j'ai pu vous aider!
    • C'est un bon travail, mais maintenant la 2e ligne de texte n'est pas en ligne avec la première ligne.
    • Essayez d'ajouter de padding à gauche.
    • merci, stupide balles disparaissent quand j'ai ajouté le débordement de la <ul>
    • text-indent: -1em; padding-left: 1em; correction de l'alignement pour moi
    • margin-left:1em rend les balles apparaissent sans jouer avec le texte de l'indentation.

    InformationsquelleAutor rawb
  2. 19

    D'ajouter les deux padding-left et un négatif text-indent à la liste des éléments de semble pour produire le résultat désiré:

    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 de liste (au lieu de la liste) et l'utilisation outside balles:

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

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

    • Ce (la 2ème solution proposée) est la solution supérieure de l'OMI, parce que l'alignement du texte reste intact lorsque les éléments de la liste de débordement sur plusieurs lignes.
    InformationsquelleAutor Blazemonger
  3. 3

    Réglage margin-left:1em rend les balles apparaissent sans jouer avec le texte de l'indentation.

    InformationsquelleAutor Sinister Beard
  4. 2

    Après avoir essayé la première réponse ici, j'ai eu des problèmes avec mes éléments de la liste de déversement sur une deuxième ligne et pas de doublure. À l'aide de column-gap j'ai été en mesure de déplacer la deuxième colonne de cours et de 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;
}
    • Je voulais juste dire que cela a sauvé ma santé mentale après les heures d'ouverture de l'enquête sur les causes de ma liste personnalisée des images (une icône pdf) étaient en voie de disparition pour la deuxième colonne.
    InformationsquelleAutor kjw