我如何使用纯css创建动态有序列表项

Question

我想制作如下图所示的有序列表。

那么我怎样才能用纯CSS制作这个有序列表.....

随着我将增加列表项目框，数字应随着列表项目框的增加而动态增加。

Answer 1

尝试这个例子小提琴：http://jsfiddle.net/AENt7/

相关CSS代码

ul {
  counter-reset: item;
  height : auto;
  overflow : hidden;
}

li {
  float : left;
  width : 80px;
  height: 80px;
  margin: 0 0 10px 10px;
  background : #d8d8d8;
  counter-increment: item   
}

ul li:nth-child(5n + 1) {
  clear : left;
}

li:before {
  content : counter(item);
}

每个块上的数字将通过为<ul>元素定义的计数器自动插入，并在每个<li>中递增。它作为before伪元素的内容插入。

关于兼容性的说明：nth-child伪类至少需要IE9，before至少需要IE8。

基本浮动结算适用于<ul> overflow: hidden和height: auto。

希望这有帮助

Answer 2

Hey Shailender Arora现在您可以使用Counter属性并使用纯css执行此操作

就像这样

<强> HTML

<ul>
  <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>


</ul>

<强>的CSS

li {
float:left;
background:#e6e6e6;
  width:100px;
  height:100px;
  list-style-type:none;
  margin:10px;
}

li {
counter-increment:shail;
}

li:after {
  content:counter(shail);
}

现场演示 http://tinkerbin.com/xq0uATYn

Answer 3

先生。帕拉佐有个好主意。但是，由于PHP不是每个人都可以使用的，所以这里是一个纯JavaScript解决方案。

document.write("<ol>");
var i;
var endLimit = 11; //you can make this anything that makes you happy

for (i = 1; i <= endLimit; i++) {
       document.write('<li>' + i + '</li>');
}

document.write("</ol>");