En esta ocasión os mostraré cómo crear una lista horizontal en CSS. Cómo no es una tarea estresante pegaré el código y iré explicando el uso de cada línea.
Código CSS:
#lista li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}
Cómo véis utilizamos un identificador (#lista) para poder seguir disponiendo de la etiqueta <li> virgen. A posteriori le decimos que la lista nos la muestre en una línea (display:inline) y no le damos ningún estilo (lo que en las listas tradicionales serian los “bullets” o estrellitas que encabezan cada elemento de la lista. Y finalmente le decimos que nos de un espacio de 20px entre elementos a la derecha. ¿sencillo no?
Código HTML para utilizar las listas hirizontales con CSS:
<ul id="lista">
<li><a href="#">Sección 1</a></li>
<li><a href="#">Sección 2</a></li>
<li><a href="#">Sección 3</a></li>
<li><a href="#">Sección 4</a></li>
<li><a href="#">Sección 5</a></li>
</ul>
No creo que tenga mucho a comentar, lista tradicional en HTML aplicándole la ID creada en la hoja de estilos.
Podeis ver el resultado final haciendo click aquí.
