Cómo crear: grupo de lista

Aprende a usar CSS para convertir una lista básica en un "grupo de lista".

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

Prueba personalmente

Cómo crear grupos de lista

Primer paso - Añadir 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 paso - Añadir CSS:

ul {
  list-style-type: none; /* Quitar puntos de lista */
  padding: 0; /* Quitar margen interior */
  margin: 0; /* Quitar margen exterior */
}
ul li {
  border: 1px solid #ddd; /* Añadir borde fino a cada elemento de lista */
  margin-top: -1px; /* Evitar borde双边 */
  background-color: #f6f6f6; /* Añadir color de fondo gris */
  padding: 12px; /* Añadir algo de margen interior */
}

Prueba personalmente

Páginas relacionadas

Tutoriales:Lista de CSS