Como criar: grupos de listas

Aprenda a usar CSS para transformar listas básicas em 'grupos de listas'.

  • Adele
  • Agnes
  • Billy
  • Bob
  • Calvin
  • Christina
  • Cindy

Experimente você mesmo

Como criar grupos de listas

Primeiro passo - Adicionar HTML:

<ul>
  <li>Adele</li>
  <li>Agnes</li>
  <li>Billy</li>
  <li>Bob</li>
  <li>Calvin</li>
  <li>Christina</li>
  <li>Cindy</li>
</ul>

Segundo passo - Adicionar CSS:

ul {
  list-style-type: none; /* Remover símbolos de lista */
  padding: 0; /* Remover espaços internos */
  margin: 0; /* Remover margem externa */
}
ul li {
  border: 1px solid #ddd; /* Adicionar borda fina a cada item da lista */
  margin-top: -1px; /* Prevenir caixas duplas */
  background-color: #f6f6f6; /* Adicionar cor de fundo cinza */
  padding: 12px; /* Adicionar alguns espaços internos */
}

Experimente você mesmo

Páginas relacionadas

Tutorial:Lista CSS