falsche Nummerierung im Inhaltsverzeichnis in HTML

Ich versuche, Inhaltsverzeichnis mit HTML in einer Datei zu schreiben. Die Nummerierung in meinem Inhaltsverzeichnis ist fehlerhaft. Wie kann ich die folgenden CSS und HTML so ändern, dass der vierte Aufzählungspunkt in meiner Output4 statt 3.4 ist?falsche Nummerierung im Inhaltsverzeichnis in HTML

ol { 
 
    counter-reset: item; 
 
} 
 

 
ol li { 
 
    line-height: 30px; 
 
} 
 

 
ol ol li { 
 
    line-height: 20px; 
 
} 
 

 
li { 
 
    display: block; 
 
} 
 

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

<ol> 
 
    <li> 
 
    <a href="#lorem_ipsum">lorem ipsum</a> 
 
    </li> 
 
    <li> 
 
    <a href="#set">Set</a> 
 
    </li> 
 
    <li> 
 
    <a href="#title">Title</a> 
 
    </li> 
 
    <ol> 
 
    <li> 
 
     <a href="#Class">Class</a> 
 
    </li> 
 
    <li> 
 
     <a href="#Something">Something</a> 
 
    </li> 
 
    <li> 
 
     <a href="#action">Action</a> 
 
    </li> 
 
    </ol> 
 
    <li> 
 
    <a href="#table_of_references">Table of References</a> 
 
    </li> 
 
</ol>

Ausgabe

1. Lorem Ipsum 
2. Set 
3. Title 
    3.1. Class 
    3.2. Something 
    3.3. Action 
3.4. Table of References

Quelle

2017-05-25 user7623610

_ "falsche Nummerierung in der Tabelle der Inhalte in HTML" _ - na ja, schreiben _invalid_ HTML, Erhalten Sie unerwartete Ergebnisse. "ol" kann kein Kind von "ol" sein. – CBroe

Wie der Kommentar sagte (@ Jon P): Ihre HTML ist ungültig. Sie können nicht ol als direkter Nachkomme von ol haben, muss es in einem li verpackt werden.

Um Verschachtelung Listen richtig, bewegen Sie einfach den Unter ol in der 3. li, überprüfen Sie das folgende Beispiel:

REF: https://developer.mozilla.org/en/docs/Web/HTML/Element/ol

ol { 
 
    counter-reset: item; 
 
} 
 

 
ol li { 
 
    line-height: 30px; 
 
} 
 

 
ol ol li { 
 
    line-height: 20px; 
 
} 
 

 
li { 
 
    display: block; 
 
} 
 

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

<ol> 
 
    <li> 
 
    <a href="#lorem_ipsum">lorem ipsum</a> 
 
    </li> 
 
    <li> 
 
    <a href="#set">Set</a> 
 
    </li> 
 
    <li> 
 
    <a href="#title">Title</a> 
 
    <ol> 
 
     <li> 
 
     <a href="#Class">Class</a> 
 
     </li> 
 
     <li> 
 
     <a href="#Something">Something</a> 
 
     </li> 
 
     <li> 
 
     <a href="#action">Action</a> 
 
     </li> 
 
    </ol> 
 
    </li> 
 
    <li> 
 
    <a href="#table_of_references">Table of References</a> 
 
    </li> 
 
</ol>

Quelle

2017-05-25 23:12:25

Willkommen bei stackOverflow @ user7623610, Wenn eine Antwort hilft Ihnen [vote it up] (http://meta.stackexchange.com/questions/173399/how-to-upvote-on-stack-overflow), Wenn die Antwort was ist Sie suchen nach markieren Sie es als [Richtige Antwort] (http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work) für die zukünftigen Leser. Vielen Dank! –

Sie Ihre LI-Tag zu früh nach dem Titel zu schließen - es unterhalb der OL-Abschnitt bewegen, wie folgt aus:

<ol> 
    <li> 
    <a href="#lorem_ipsum">lorem ipsum</a> 
    </li> 
    <li> 
    <a href="#set">Set</a> 
    </li> 
    <li> 
    <a href="#title">Title</a> 
    <ol> 
    <li> 
     <a href="#Class">Class</a> 
    </li> 
    <li> 
     <a href="#Something">Something</a> 
    </li> 
    <li> 
     <a href="#action">Action</a> 
    </li> 
    </ol> 
    </li> 
    <li> 
    <a href="#table_of_references">Table of References</a> 
    </li> 
</ol>

Quelle

2017-05-25 23:17:18 asetniop

falsche Nummerierung im Inhaltsverzeichnis in HTML

Antwort

Verwandte Themen