用css多列的有序清单号

Question

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

是否有一种方法可以获取多列中整个列表的编号。

请检查FIDDLE

.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

当李默认列表样式位置成为外界，所以我们只是作出里面。

使用list-style: inside decimal;来李。

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