HTML.it - Guida CSS di base - Liste
Usare un'immagine come marcatore
- Questo list-item ha un'immagine
- come marcatore grazie a
list-style-image
- Item 3
- Item 4
<ul class="lista-1">
<li>Questo list-item [...]</li>
<li>come marcatore [...]</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
ul.lista-1 li {list-style-image: url(marker.png);}
Posizionare il marcatore: outside
- Questo list-item ha il marcatore all'esterno
- Item 2
- Item 3
<ul class="lista-2">
<li>Questo list-item [...]</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
ul.lista-2 li {list-style-position: outside;}
Posizionare il marcatore: inside
- Questo list-item ha il marcatore all'interno. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
- Item 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
- Item 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<ul class="lista-3">
<li>Questo list-item [...]</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
ul.lista-3 li {list-style-position: inside;}
Marcatore a quadratino
ul.lista-4 li {list-style-type: square;}
Marcatore a lettere romane minuscole
ol.lista-5 li {list-style-type: lower-roman;}