Why using CSS3 columns in Chrome removes item numbers on lists
It seems the numbers are actually hidden. This can be resolved by using the following property:
OL { list-style-position: inside;}
You can always just throw a <div> around the <ol> and give the <div> multiple columns instead of the <ol>.
<div style = -webkit-column-count: 2;...><ol> ....</ol></div>When I do that, however, I end up with the 2nd column being one line higher than the 1st column for some reason. Also only happens in Chrome.
Edit: Solution to my above problem was just to add a zero margin for the <ol>, so this should work fine:
<div style = -webkit-column-count: 2;...><ol style = margin: 0;> ....</ol></div>Oddly enough, having some padding on the <ol> seems to get rid of the numbers as well, so if you have padding somewhere that might be the culprit.
Often one's style sheet would have an html reset, among which there is a padding: 0; reset on list items.
while the following, by Stéphane works like a charm,
ul { list-style-position: inside;}you can also give your list items a padding-left:
padding-left: 16px;