Las viñetas desaparecen con las columnas CSS3

Las viñetas en los elementos de mi lista desaparecen cuando las convierto en columnas usando CSS3. Alguna idea de por qué o sugerencias sobre cómo corregirlo?

Ver el ejemplo: 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;
}
Author: userlond, 2012-06-01
Source

4 answers

Creo que las balas están ahí, pero están siendo renderizadas a la izquierda del área de visión. Try: 

list-style-position: inside;
 79
Author: rawb,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-06-01 18:40:33

Agregar padding-left y un negativo text-indent a los elementos de la lista parece producir el resultado deseado: 

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

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

Alternativamente, agregue un margin-left al elemento list (en lugar de la lista) y use outside viñetas: 

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

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

 19
Author: Blazemonger,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-02-21 15:44:31

El ajuste margin-left:1em hace que las viñetas aparezcan sin interferir con la sangría del texto.

 3
Author: Sinister Beard,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-09-28 08:40:47

Después de probar la primera respuesta aquí, estaba teniendo problemas con los elementos de mi lista que se derramaban en una segunda fila y no se alineaban. Usando column-gap pude mover la segunda columna y ver las viñetas.

Fuente: 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
Author: kjw,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-09-28 18:45:07