如何修复在 Webkit 上使用 CSS3 列时不显示的列表样式答案

【问题标题】：How to fix list style not showing when using CSS3 columns on Webkit如何修复在 Webkit 上使用 CSS3 列时不显示的列表样式
【发布时间】：2012-09-10 18:30:35
【问题描述】：

此处的示例：http://jsfiddle.net/R7GUZ/3/

我有一段时间让list-style 在 webkit 中为一个使用

样式的父 OL 工作

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

如何使用 css3 将有序列表格式化为列，同时仍保持 list-style 样式？

           <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>

【问题讨论】：

标签： html css html-lists multiple-columns

【解决方案1】：

向lis 添加 20px 的 margin-left 就可以了

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

【讨论】：

谢谢，这个问题让我发疯，直到我认为这是一个列 v 列表样式图像问题。您的解决方案有效，尽管我还从 ol/ul 元素中删除了 padding-left，这样我就没有不必要的额外间距。

【解决方案2】：

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

OL {
  list-style-position: inside;
}

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

【讨论】：