我如何用纯css创建dynaminc有序列表项

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伪类至少before需要IE9,至少需要IE8.

一个基本的浮子结算被施加到<ul>与overflow: hidden和height: auto.

希望这可以帮助