Bullets disappear with CSS3 columns

Andrew picture Andrew · Jun 1, 2012 · Viewed 17k times · Source

The bullets on my list items disappear when I convert them to columns using CSS3. Any ideas why or suggestions on how to correct it?

See the example: 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;
}

Answer

rawb picture rawb · Jun 1, 2012

I think the bullets are there, but they're being rendered to the left of the viewing area. Try:

list-style-position: inside;