2

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

那么我如何用纯 CSS 制作这个有序列表.....

因为我会增加列表项框的数量，所以应该随着列表项框的增加而动态增加。

在此处输入图像描述

4

3 回答 3

5

试试这个例子小提琴：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>element 定义的计数器自动插入，并在 each 中递增<li>。它作为伪元素的内容插入before。

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

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

希望这可以帮助

于 2012-06-28T09:24:53.957 回答
0

帕拉佐先生有一个好主意。但是，由于并非所有人都可以使用 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>");
于 2012-06-28T09:27:54.117 回答
0

嘿 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

于 2012-06-28T09:25:19.450 回答