如何创建1.1,1.2 1.3 ... HTML列表？

Question

我想创建具有以下格式的HTML嵌套列表：

1  
   1.1  
   1.2  
   1.3  
   1.4   
2
   2.1

我尝试了一种我在互联网上找到的解决方案：

OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, ".") " "; counter-increment: item }

但它对我没有用。有什么帮助吗？

如果计数器解决方案太复杂，有没有办法伪造嵌套列表效果，通过手动编写它们但确保格式看起来像真正的列表

---

编辑

需要完整的IE6支持

Answer 1

这应该工作。这是一个不好的方法，但如果你必须支持IE6没有太多的选择。

      <ol>
        <li><span>1</span> Item
          <ol>
            <li><span>1.1</span> Item</li>
            <li><span>1.2</span> Item</li>
            <li><span>1.3</span> Item</li>
            <li><span>1.4</span> Item</li>
          </ol>
        </li>            
        <li><span>2</span> Item
          <ol>
            <li><span>2.1</span> Item</li>
          </ol>            
        </li>
      </ol>

用css

ol {list-style:none;}

在你的评论之后我重新做了一点。

  <ol>
    <li><span>1</span> Item
      <ol>
        <li><span>1.1</span> <p>ItemItemItem ItemItemItemItemItemItemItemItem ItemItemItemItemItemItemItemItem ItemItemItemItemItemItemItemItem</p></li>
        <li><span>1.2</span> <p>ItemItemItem ItemItemItemItemItemItemItemItem ItemItemItemItemItemItemItemItem ItemItemItemItemItemItemItemItem</p></li>
        <li><span>1.3</span> <p>ItemItemItem ItemItemItemItemItemItemItemItem ItemItemItemItemItemItemItemItem ItemItemItemItemItemItemItemItem</p></li>
        <li><span>1.4</span> <p>Item</p></li>
      </ol>
    </li>            
    <li><span>2</span> Item
      <ol>
        <li><span>2.1</span> Item</li>
      </ol>            
    </li>
  </ol>

而css将是

ol {list-style:none;}
ol li span
{
  display: block;
  float: left;
  width: 30px;
}
ol li
{
 clear:both;
 width: 400px;

}
ol li p
{
  float: left;
  width: 370px;
  margin: 0;

}

您可能需要调整宽度。

Answer 2

这个答案是第一个问题。如果你不低于IE8（IE7 =>？），我建议使用这种方法。对于IE7以下，您可以使用与jquery相同的逻辑。

原帖来自 http://www.w3schools.com/cssref/pr_gen_counter-reset.asp

CSS

ul.numeric-decimals { counter-reset:section; list-style-type:none; }
ul.numeric-decimals li { list-style-type:none; }
ul.numeric-decimals li ul { counter-reset:subsection; }
ul.numeric-decimals li:before{
    counter-increment:section;
    content:counter(section) ". ";/*content:"Section " counter(section) ". ";*/
}
ul.numeric-decimals li ul li:before {
    counter-increment:subsection;
    content:counter(section) "." counter(subsection) " ";
}

HTML

<ul class="numeric-decimals">
<li>Cats</li>
<li>Dogs
    <ul>
        <li>Birds</li>
        <li>Rats</li>
    </ul>
</li>
<li>Rabbits</li>
<li>Ants
    <ul>
        <li>Lions</li>
        <li>Rats</li>
    </ul>
</li>
<li>Ducks</li>

Answer 3

before元素在IE6中不起作用，但这是正确的方法。我建议使用IE7.js，一个javascript库，使IE6的行为类似于IE7，其中涉及到javascript和CSS。另一种方法可能是使用仅在浏览器是IE6并且遍历de DOM修改列表项时运行的javascript hack ...

在For A Beautiful Web，您可以找到有关IE6兼容网站的更多信息。

Answer 4

在FF 3.6.6中对我来说非常适合，所以：

1. 哪个浏览器无法使用？
2. 你的标记是什么样的（即你正确地嵌套列表）？

Answer 5

此示例使用IE6特定的CSS属性behavior在每个li之前添加静态标记。必须有一些MS特定的魔法可以用计数器替换静态破折号。

如果您希望它是一个CSS解决方案，请使用此作为起点，然后谷歌“MSDN”。

ul.example { margin: 0.5em 0; padding: 0 0 0 2em; }
ul.example li
{
    margin: 0.5em 0; padding: 0 0 0 20px;
    list-style-type: none;
    behavior: expression( !this.before
        ? this.before = this.innerHTML = '— ' + this.innerHTML : '' );
    text-indent: -1.24em;
}
ul.example li:before { content: '\2014\a0'; }

Answer 6

你可以使用counters这样做：

例

ol { counter-reset: item }
li{ display: block }
li:before { content: counters(item, ".") " "; counter-increment: item }

<ol>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
  <li>li element</li>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
</ol>