css - 为什么在 Chrome 中使用 CSS3 列会删除列表中的项目编号

Question

我注意到当我添加 css 来操作列数时，chrome 正在删除我的列表项上的数字......

例如：

<ol style =-webkit-column-count: 2;...">
   ....
</ol>

上面确实设法按预期将 li 溢出到单独的列中，但它也删除了默认项目编号。这不会发生在 Firefox 中，只有 chrome。

有任何想法吗？

Answer 1

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

OL {
  list-style-position: inside;
}

Answer 2

您总是可以只在<div>周围抛出 a<ol>并给出<div>多个列而不是<ol>.

<div style = -webkit-column-count: 2;...><ol>
    ....
</ol></div>

但是，当我这样做时，由于某种原因，我最终会得到第二列比第一列高一行。也只发生在 Chrome 中。

编辑：我上述问题的解决方案只是为 增加一个零边距<ol>，所以这应该可以正常工作：

<div style = -webkit-column-count: 2;...><ol style = margin: 0;>
    ....
</ol></div>

奇怪的是，有一些填充<ol>似乎也摆脱了数字，所以如果你有填充可能是罪魁祸首。

Answer 3

通常一个人的样式表会有一个 html 重置，其中有一个padding: 0;列表项的重置。

而Stéphane的以下作品就像一个魅力，

ul {
  list-style-position: inside;
}

你也可以给你的列表项一个 padding-left：

padding-left: 16px;

Answer 4

column-width由于某些原因，当您应用规则时，位于元素之外的列表样式（默认）会被隐藏。以下是我根据其他答案和我自己的实验尝试在 Chrome 中模拟“预期”行为的最佳方法。

演示

HTML

<div class="col-wrapper">
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ol>
</div>

CSS

.col-wrapper {
    -moz-column-width: 200px;
    -moz-column-gap: 1em;
    -webkit-column-width: 200px;
    -webkit-column-gap: 1em;
    column-width: 200px;
    column-gap: 1em;

    /* (optional) use ol's margin here */
    margin-top: 16px;
}

.col-wrapper ol {
    /* clear top margin of ol */
    margin-top: 0;
}