Wie erstellt man eine 1.1, 1.2 1.3 ... HTML-Liste?

Question

Ich möchte HTML verschachtelte Listen erstellen, die das folgende Format hat:

1 
    1.1 
    1.2 
    1.3 
    1.4 
2 
    2.1 

habe ich versucht, eine Lösung, die ich im Internet gefunden:

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

Aber es hat nicht für mich arbeiten. Irgendwelche Hilfe bitte ??

Wenn der Zähler Lösung zu kompliziert ist, ist es eine Möglichkeit, zu fälschen die verschachtelte Liste Effekt, indem man sie von Hand zu schreiben, aber sicher zu sein, dass die Formatierung wie eine echte Liste sieht

---

EDIT

müssen voll IE6 Unterstützung

Answer 1

Dies sollte funktionieren. Es ist ein schlechter Weg, dies zu tun, aber wenn Sie IE6 nicht viel Auswahl unterstützen müssen.

 <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> 

mit css

ol {list-style:none;} 

Nachdem Sie Ihren Kommentar ich nochmals gemacht habe es ein wenig.

<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> 

Und die CSS wäre

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; 

} 

Sie müssen die Breiten anpassen können.

Answer 2

funktioniert perfekt für mich, in FF 3.6.6, so:

1. In welchem ​​Browser funktioniert es nicht?
2. Wie sieht Ihr Markup aus (d. H., Verschachteln Sie die Listen korrekt)?

Answer 3

Das vor Element funktioniert nicht in IE6, aber es ist die richtige Art und Weise, dies zu tun. Ich würde empfehlen, IE7.js, eine Javascript-Bibliothek, die IE6 verhält sich wie IE7, wo Javascript und CSS betroffen sind. Eine andere Möglichkeit könnte die Verwendung eines Javascript-Hacks sein, der nur ausgeführt wird, wenn der Browser IE6 ist und dom ändert, um die Listenelemente zu ändern ...

In For A Beautiful Web finden Sie weitere Informationen zu IE6-kompatiblen Websites.

Answer 4

diese Antwort ist für die erste Frage. Ich schlage vor, diese Methode zu verwenden, wenn Sie nicht unter IE8 gehen (IE7 =>?). Für unter IE7 können Sie die gleiche Logik mit jQuery verwenden.

Original-Beitrag von
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

Answer 5

Dieses Beispiel verwendet IE6-spezifische CSS-Attribut behavior eine statische Markierung vor jedem li hinzuzufügen. Es muss eine MS-spezifische Magie geben, die einen statischen Strich durch einen Zähler ersetzen kann.

Wenn Sie möchten, dass es sich um eine CSS-Lösung handelt, verwenden Sie diese als Ausgangspunkt und googeln Sie dann "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

können Sie counters verwenden, dies zu tun:

Beispiel

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>