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>周りに投げて、の代わりに複数の列<ol>を与えることができます。<div><ol>

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

しかし、そうすると、どういうわけか、2列目が1列目より1行高くなってしまいます。また、Chromeでのみ発生します。

編集：上記の問題の解決策は、にゼロマージンを追加することでした<ol>。したがって、これは正常に機能するはずです。

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

奇妙なことに、いくつかのパディングがある<ol>と数字も削除されるようです。したがって、どこかにパディングがある場合は、それが原因である可能性があります。

Answer 3

多くの場合、スタイルシートにはhtmlがリセットされ、その中padding: 0;にリスト項目がリセットされます。

次のステファンは魅力のように機能しますが、

ul {
  list-style-position: inside;
}

リストアイテムにパディングを付けることもできます-左：

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