Lección 13: Listas

list-style-type

Puedes usar los estilos predifinidos.

ul {
  list-style-type: disc;
  list-style-type: circle;
  list-style-type: square;
  list-style-type: decimal;
}
  • Lorem.
  • Fuga.
  • Placeat.

Usar un texto o emoji.

ul {
  list-style-type: '👍';
}
  • Comer fruta
  • Hacer ejercicio
  • Pagar impuestos

O quitarlos.

ul {
  list-style-type: none;
}
  • Inicio
  • FAQ
  • Nosotros

Más información

image

Usa una imagen como marcador en una lista desordenada.

ul {
  list-style-image: url('oro.png');
}
  • Fernando Alonso
  • Michael Schumacher
  • Ayrton Senna

Más información

position

Indicas donde quieres que se sitúe el marcador.

Dentro del <ul>.

ul {
  list-style-position: inside;
}
  • Lorem.
  • Fuga.
  • Placeat.

Fuera del <ul>.

ul {
  list-style-position: outside;
}
  • Lorem.
  • Fuga.
  • Placeat.

Más información

12-1 12-2 12-3 12-4

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me ayudas?

No te sientas obligado a realizarme una donación, pero cada aportación me ayuda a mantener el sitio en activo para que continúe existiendo y me motiva a continuar creando nuevo contenido.

Comprame un café
Pulsa sobre la imagen
  • 1 café: Se mantiene el dominio durante 4 meses.
  • 2 cafés: Se liquida 1 mes del Servidor Web.
  • 3 cafés: Se paga 1 mes de Newsletter.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario