2

我正在使用默认编号创建一个有序列表。该列表将超过 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>

4

1 回答 1

3

当默认的 li 列表样式位置变为 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>

于 2016-01-25T12:54:02.440 回答