Exibição de uma lista
- ×
Mike
Web designer - ×
Jill
Apoio - ×
Jane
Contador
Lista básica
- Jill
- véspera
- Adão
Lista delimitada
- Jill
- véspera
- Adão
Exemplo
<ul class="w3-ul w3-border">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Tente você mesmo " lista de cabeçalho
Names
- Jill
- véspera
- Adão
Exemplo
<ul class="w3-ul w3-border">
<li><h2>Names</h2></li>
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Tente você mesmo " Lista como um cartão
- Jill
- véspera
- Adão
Exemplo
<ul class="w3-ul w3-card-4">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Tente você mesmo " Lista centrado
- Jill
- véspera
- Adão
Exemplo
<ul class="w3-ul w3-center">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Tente você mesmo " Lista Colorido
- Jill
- véspera
- Adão
Lista Colored item
- Jill
- véspera
- Adão
Exemplo
<ul class="w3-ul">
<li class="w3-blue">Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Tente você mesmo " lista Hoverable
A classe w3-hoverable adiciona uma cor de fundo cinza para cada item da lista ao passar o mouse:
- Jill
- véspera
- Adão
Exemplo
<ul class="w3-ul w3-hoverable">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Tente você mesmo " Se você quer uma cor foco específico, adicionar qualquer um dos w3-pairar-classes para cada elemento <li>:
- Jill
- véspera
- Adão
lista closable
Clique na letra "x" para fechar / ocultar um item da lista:
- Jill x
- Adam x
- Eve x
Exemplo
<li>Jill
<span onclick="this.parentElement.style.display='none'"
class="w3-closebtn w3-margin-right w3-medium">x</span>
</li>
Tente você mesmo " Lista acolchoado
- Jill
- véspera
- Adão
- Jill
- véspera
- Adão
Exemplo
<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>
Tente você mesmo " Lista de Avatar
- X Mike
Web designer - X Jill
Apoio - X Jane
Contador
Exemplo
<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>
Tente você mesmo " Lista minúsculo
- Jill
- véspera
- Adão
Lista Pequena
- Jill
- véspera
- Adão
Exemplo
<ul class="w3-ul w3-small">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Tente você mesmo " Lista Grande
- Jill
- véspera
- Adão
Exemplo
<ul class="w3-ul w3-large">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Tente você mesmo " Lista XLarge
- Jill
- véspera
- Adão
Exemplo
<ul class="w3-ul w3-xlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Tente você mesmo " Lista XXLarge
- Jill
- véspera
- Adão
Exemplo
<ul class="w3-ul w3-xxlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Tente você mesmo " Lista XXXLarge
- Jill
- véspera
- Adão
Exemplo
<ul class="w3-ul w3-xxxlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Tente você mesmo " Lista jumbo
- Jill
- véspera
- Adão
Exemplo
<ul class="w3-ul w3-jumbo">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Tente você mesmo "