Bullets disappear with CSS3 columns

Question

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 1

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

list-style-position: inside; 

Answer 2

Adding both padding-left and a negative text-indent to the list elements seems to produce the desired result:

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

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

Alternatively, add a margin-left to the list element (instead of the list) and use outside bullets:

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

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