Ordered list number with css multiple column

问题

I am creating an ordered list with the default numbering. The list would be more than 300. I have divided into columns using css- column-count which divides the list into columns but the default list numbering is present only for the first column.

Is there a way to get the numbering for the whole list in multiple columns.

Please check 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>

回答1:

When default li list style position become outside , so we just make as inside.

Use list-style: inside decimal; to 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>

来源：https://stackoverflow.com/questions/34992924/ordered-list-number-with-css-multiple-column

标签

css

html-lists

column-count