Question

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

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

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

但它对我没用。请帮忙吗？

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

修改

需要完整的IE6支持

Answer 1

这个答案是第一个问题。如果你不低于IE8（IE7 =＆gt;？），我建议使用这种方法。对于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 2

这应该有效。这是一个不好的方法，但如果你必须支持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 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中完美适合我，所以：

哪个浏览器无效？
您的标记是什么样的（即您是否正确嵌套列表）？

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 = '&mdash;&nbsp;' + 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>

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

6 个答案: