CSS Nest-Liste - wie zu Ziffer

Im eine Liste wie diese CSS Nest-Liste - wie zu Ziffer

einer Schaffung i Rottweiler und Dobermann auflisten möge wie 1.1 und 1.2, aber ich habe keine Ahnung, wie es zu tun. Ich habe diese CSS-Listenvorlage kopiert und einige Änderungen vorgenommen. Hier ist der Code:

#lista2 { 
 
    counter-reset: li; 
 
    list-style: none; 
 
    *list-style: decimal; 
 
    font: 15px 'trebuchet MS', 'lucida sans'; 
 
    padding: 0; 
 
    margin-bottom: 4em; 
 
    text-shadow: 0 1px 0 rgba(255,255,255,.5); 
 
} 
 

 
#lista2 ol { 
 
    margin: 0 0 0 2em; 
 
    counter-reset: section;    
 
    \t list-style-type: none; 
 
} 
 

 
#lista2 li{ 
 
    position: relative; 
 
    display: block; 
 
    padding: .4em .4em .4em 2em; 
 
    *padding: .4em; 
 
    margin: .5em 0; 
 
    background: #ddd; 
 
    color: #444; 
 
    text-decoration: none; 
 
    border-radius: .3em; 
 
    transition: all .3s ease-out; 
 

 
} 
 

 
#lista2 li:hover{ 
 
    background: #eee; 
 
} 
 

 
#lista2 li:hover:before{ 
 
    transform: rotate(360deg); 
 
} 
 

 
#lista2 li:before{ 
 
    content: counter(li); 
 
    counter-increment: li; 
 
    position: absolute; 
 
    left: -1.3em; 
 
    top: 50%; 
 
    margin-top: -1.3em; 
 
    background: #87ceeb; 
 
    height: 2em; 
 
    width: 2em; 
 
    line-height: 2em; 
 
    border: .3em solid #fff; 
 
    text-align: center; 
 
    font-weight: bold; 
 
    border-radius: 2em; 
 
    transition: all .3s ease-out; 
 
} 
 

 
#lista2 ol ol li:before{ 
 
\t counter-increment: li; 
 
    content: counters(li,".") " "; 
 
} 
 
#lista2 ol { 
 
    counter-reset: li; 
 
    list-style: none; 
 
}

<ol id="lista2"> 
 
    <li>Animals 
 
\t \t \t <ol> 
 
\t \t \t \t <li>Dogs</li> 
 
\t \t \t \t \t <ol> 
 
\t \t \t \t \t \t <li>Rottweiler</li> 
 
\t \t \t \t \t \t <li>Doberman</li> 
 
\t \t \t \t \t </ol> 
 
\t \t \t \t <li>Cats</li> 
 
\t \t \t \t <li>Cacatoos</li> 
 
\t \t \t \t </ol> 
 
\t \t </li> 
 
</ol>

Ich hoffe jemand kann mir helfen. Vielen Dank!

Quelle

2017-05-07 Eduardo moreno

Plunkr Verbindung - https://plnkr.co/edit/dtn5xgoOOoSmVc4B3LrH?p=preview

HTML:

<!DOCTYPE html> 
<html> 

    <head> 
    <link rel="stylesheet" href="style.css"> 
    <script src="script.js"></script> 
     <style> 
    OL { counter-reset: item } 
    LI { display: block } 
    LI:before { content: counters(item, ".") " "; counter-increment: item } 
    </style> 
    </head> 

<body> 
<ol> 
    <li>Dogs 

    <ol> 
    <li>Rottweiler</li> 
    <li>Doberman</li> 

    </ol> 
</li> 
    <li>Cats 
    </li> 
    <li>Cacatoos</li> 
    </ol> 

    </body> 

</html>

CSS:

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

Quelle

2017-05-07 19:00:19

Dank, ich hatte nur ein bisschen meine HTML-Liste ändern Hunde an der richtigen Stelle zu bekommen –

CSS Nest-Liste - wie zu Ziffer

Antwort

Verwandte Themen