带CSS多列的有序列表编号 [英] Ordered list number with css multiple column

问题描述

我正在使用默认编号创建一个有序列表.列表将超过300.我使用css- column-count将列表分为几列，但默认列表编号仅出现在第一列.

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.

请检查 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>

推荐答案

当默认的li列表样式位置变为外部时，因此我们将其设置为内部.

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

使用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>

这篇关于带CSS多列的有序列表编号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！