css - 純粋な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疑似クラスには少なくともIE9がbefore必要であり、少なくともIE8が必要です。

基本的なフロートクリアリングは、<ul>withoverflow: 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>");