32. Listas desordenadas

Una lista desordenada comienza con la etiqueta <ul>. Cada elemento de la lista comienza con la etiqueta <li>. Los elementos de la lista se marcarán con viñetas (pequeños círculos negros) de forma predeterminada.

Ejm

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Lista HTML desordenada: elegir marcador de elemento de lista

La propiedad CSS list-style-type se utiliza para definir el estilo del marcador de elemento de lista. Puede tener uno de los siguientes valores.

Valor Descripción
disc Establece el marcador de elementos de la lista en una viñeta (predeterminado)
circle Establece el marcador de elementos de la lista en un círculo
square Establece el marcador de elementos de la lista en un cuadrado
none Los elementos de la lista no se marcarán

Ejm

<ul style="list-style-type:disc;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Listas anidadas

Las listas pueden estar anidadas (una lista dentro de otra)

Ejm

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

Listas horizontales con CSS

Las listas HTML se pueden diseñar de muchas maneras diferentes con CSS. Una forma popular es diseñar una lista horizontalmente, para crear un menú de navegación.

Ejm

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111111;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>
Scroll al inicio