css 多列的有序列表编号

Question

我正在使用默认编号创建一个有序列表。该列表将超过 300。我使用 css- column-count 将列表分成几列，但默认列表编号仅适用于第一列。

有没有办法在多个列中获取整个列表的编号。

.bucketcol{
  float:left;margin-right:10px;
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  height:100px;
 }
 .bucketcol li{
   width:110px;
 }

<ol class="bucketcol ui-sortable" id="sortable">
<li class="bucketrow">Object 1</li><li class="bucketrow">Object 2</li><li class="bucketrow">Object 3</li><li class="bucketrow">Object 4</li><li class="bucketrow">Object 5</li><li class="bucketrow">Object 6</li><li class="bucketrow">Object 7</li><li class="bucketrow">Object 8</li><li class="bucketrow">Object 9</li><li class="bucketrow">Object 10</li><li class="bucketrow">Object 11</li><li class="bucketrow">Object 12</li><li class="bucketrow">Object 13</li><li class="bucketrow">Object 14</li><li class="bucketrow">Object 15</li><li class="bucketrow">Object 16</li><li class="bucketrow">Object 17</li><li class="bucketrow">Object 18</li><li class="bucketrow">Object 19</li><li class="bucketrow">Object 20</li></ol>

Answer 1

当默认的li list style position 变为outside 时，我们就设置为inside。

使用 list-style: inside decimal; 到 li .

.bucketcol{
  float:left;margin-right:10px;
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  height:100px;
 }
 .bucketcol li{
   width:110px;
   list-style: inside decimal;
 }

<ol class="bucketcol ui-sortable" id="sortable">
<li class="bucketrow">Object 1</li><li class="bucketrow">Object 2</li><li class="bucketrow">Object 3</li><li class="bucketrow">Object 4</li><li class="bucketrow">Object 5</li><li class="bucketrow">Object 6</li><li class="bucketrow">Object 7</li><li class="bucketrow">Object 8</li><li class="bucketrow">Object 9</li><li class="bucketrow">Object 10</li><li class="bucketrow">Object 11</li><li class="bucketrow">Object 12</li><li class="bucketrow">Object 13</li><li class="bucketrow">Object 14</li><li class="bucketrow">Object 15</li><li class="bucketrow">Object 16</li><li class="bucketrow">Object 17</li><li class="bucketrow">Object 18</li><li class="bucketrow">Object 19</li><li class="bucketrow">Object 20</li></ol>

css 多列的有序列表编号

Ordered list number with css multiple column

css

html-lists

column-count