Affichage d'une liste
- ×
Mike
Web Designer - ×
Jill
Soutien - ×
Jeanne
Comptable
Liste de base
- Jill
- Veille
- Adam
Liste bordé
- Jill
- Veille
- Adam
Exemple
<ul class="w3-ul w3-border">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Try It Yourself » Liste Header
Des noms
- Jill
- Veille
- Adam
Exemple
<ul class="w3-ul w3-border">
<li><h2>Names</h2></li>
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Try It Yourself » Liste comme une carte
- Jill
- Veille
- Adam
Exemple
<ul class="w3-ul w3-card-4">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Try It Yourself » Liste Centré
- Jill
- Veille
- Adam
Exemple
<ul class="w3-ul w3-center">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Try It Yourself » Liste Colored
- Jill
- Veille
- Adam
Liste Colored Item
- Jill
- Veille
- Adam
Exemple
<ul class="w3-ul">
<li class="w3-blue">Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Try It Yourself » liste Hoverable
La classe w3-hoverable ajoute une couleur de fond gris pour chaque élément de liste sur la souris sur:
- Jill
- Veille
- Adam
Exemple
<ul class="w3-ul w3-hoverable">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Try It Yourself » Si vous voulez une couleur hover spécifique, ajoutez l' une des w3-hover-classes à chaque élément <li>:
- Jill
- Veille
- Adam
liste Closable
Cliquez sur la lettre "x" pour fermer / masquer un élément de la liste:
- Jill x
- Adam x
- Eve x
Exemple
<li>Jill
<span onclick="this.parentElement.style.display='none'"
class="w3-closebtn w3-margin-right w3-medium">x</span>
</li>
Try It Yourself » Liste rembourrée
- Jill
- Veille
- Adam
- Jill
- Veille
- Adam
Exemple
<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>
Try It Yourself » Liste d'avatars
- X Mike
Web Designer - X Jill
Soutien - X Jeanne
Comptable
Exemple
<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>
Try It Yourself » Liste minuscule
- Jill
- Veille
- Adam
Petite liste
- Jill
- Veille
- Adam
Grande liste
- Jill
- Veille
- Adam
Liste XLarge
- Jill
- Veille
- Adam
Exemple
<ul class="w3-ul w3-xlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Try It Yourself » Liste XXLarge
- Jill
- Veille
- Adam
Exemple
<ul class="w3-ul w3-xxlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Try It Yourself » Liste XXXLarge
- Jill
- Veille
- Adam
Exemple
<ul class="w3-ul w3-xxxlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Try It Yourself » Liste Jumbo
- Jill
- Veille
- Adam