我如何使用纯CSS创建dynaminc有序列表项目

Question

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

所以我怎么可以让这种有序列表纯CSS .....

我将增加列表项框中的数字应该动态地增加列表项框增加。

Answer 1

嘿Shailender阿罗拉现在你可以使用计数器属性和纯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 2

尝试这个例子小提琴：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 pseudoelement的内容被插入。

兼容性说明：nth-child伪类至少需要IE9,before至少需要IE8。

基本浮动清除适用于<ul>,overflow: hidden和height: auto。

希望这有助于

Answer 3

Pallazzo先生有一个好主意。但是，由于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>");