Visualizzazione di un elenco
- ×
Microfono
Web designer - ×
Jill
Supporto - ×
Jane
Contabile
Lista di base
- Jill
- vigilia
- Adamo
Lista delimitata
- Jill
- vigilia
- Adamo
Esempio
<ul class="w3-ul w3-border">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Prova tu stesso " lista Intestazione
nomi
- Jill
- vigilia
- Adamo
Esempio
<ul class="w3-ul w3-border">
<li><h2>Names</h2></li>
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Prova tu stesso " Lista come una scheda
- Jill
- vigilia
- Adamo
Esempio
<ul class="w3-ul w3-card-4">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Prova tu stesso " Lista centrato
- Jill
- vigilia
- Adamo
Esempio
<ul class="w3-ul w3-center">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Prova tu stesso " Lista colorata
- Jill
- vigilia
- Adamo
Lista Colored Articolo
- Jill
- vigilia
- Adamo
Esempio
<ul class="w3-ul">
<li class="w3-blue">Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Prova tu stesso " lista Hoverable
La classe w3-hoverable aggiunge un colore di sfondo grigio per ogni elemento della lista al passaggio del mouse:
- Jill
- vigilia
- Adamo
Esempio
<ul class="w3-ul w3-hoverable">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Prova tu stesso " Se si desidera un colore hover specifica, aggiungere qualsiasi delle W3-hover-classi per ogni elemento <li>:
- Jill
- vigilia
- Adamo
lista chiudibile
Fare clic sulla lettera "x" per chiudere / nascondere un elemento della lista:
- Jill x
- Adam x
- Eve x
Esempio
<li>Jill
<span onclick="this.parentElement.style.display='none'"
class="w3-closebtn w3-margin-right w3-medium">x</span>
</li>
Prova tu stesso " Lista imbottito
- Jill
- vigilia
- Adamo
- Jill
- vigilia
- Adamo
Esempio
<ul class="w3-ul">
<li class="w3-padding-hor-16">Jill</li>
<li
class="w3-padding-hor-16">Eve</li>
<li class="w3-padding-hor-16">Adam</li>
</ul>
Prova tu stesso " Lista Avatar
- X Microfono
Web designer - X Jill
Supporto - X Jane
Contabile
Esempio
<ul class="w3-ul w3-card-4">
<li class="w3-padding-hor-16">
<span onclick="this.parentElement.style.display='none'"
class="w3-closebtn w3-padding">x</span>
<img src="img_avatar2.png"
class="w3-left w3-circle" style="width:60px">
<span
class="w3-xlarge">Mike</span><br>
<span>Web
Designer</span>
</li>
</ul>
Prova tu stesso " Lista piccolo
- Jill
- vigilia
- Adamo
Elenco breve
- Jill
- vigilia
- Adamo
Elenco lungo
- Jill
- vigilia
- Adamo
Lista XLarge
- Jill
- vigilia
- Adamo
Esempio
<ul class="w3-ul w3-xlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Prova tu stesso " Lista XXLarge
- Jill
- vigilia
- Adamo
Esempio
<ul class="w3-ul w3-xxlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Prova tu stesso " Lista XXXLarge
- Jill
- vigilia
- Adamo
Esempio
<ul class="w3-ul w3-xxxlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Prova tu stesso " Lista Jumbo
- Jill
- vigilia
- Adamo