如何創建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

這個答案是第一個問題。 如果你不低於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 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

您可以使用計數器執行此操作：

例

 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> 

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

在FF 3.6.6中對我來說非常適合，所以：

1. 哪個瀏覽器無法使用？
2. 你的標記是什么樣的（即你正確地嵌套列表）？