html - How to fix list style not showing when using CSS3 columns on Webkit

Question

example here: http://jsfiddle.net/R7GUZ/3/

I'm having a heck of a time getting list-style to work in webkit for a parent OL styled with

-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;

How do I format an ordered list into columns with css3 and still maintain the list-style styling?

           <ol class="text-col2">
                <li>
                    <strong>Can we call you?</strong>
                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia.</p>
                </li>

                <li>
                    <strong>Can we call you?</strong>
                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia.</p>
                </li>
            </ol>

​</p>

Answer 1

li向s添加 20px margin-left 就可以了

ol li {
   list-style: decimal;
   margin-left: 20px
}

Answer 2

似乎这些数字实际上是隐藏的。这可以通过使用以下属性来解决：

OL {
  list-style-position: inside;
}

请注意，如果您已重置marginandpadding属性（如您在 jsFiddle 上的示例中 CSS 已被规范化），您必须将它们设置为正确的值，以便正确格式化列。