Por defecto al programar en HTML una lista usamos el siguiente código:

<div id="lista">
<ul>
        <li>Elemento uno</li>
        <li>Elemento dos</li>
        <li>Elemento tres</li>
</ul>
</div>

Al hacerlo de esta manera tendremos como resultado:

  • Elemento uno
  • Elemento dos
  • Elemento tres

Si queremos conseguir que la lista se muestre horizontalmente con la ayuda de CSS lo conseguiremos de una manera muy sencilla, únicamente tendremos que definir en nuestra hoja de estilos:

#lista ul li {
      display: inline;
}

Dónde “lista” es el nombre que le hemos dado a la capa (div) que contiene la propia lista.

El resultado es el siguiente:

  • Elemento uno
  • Elemento dos
  • Elemento tres

Luego se le puede dar un poco más de diseño a nuestra lista agregándole imágenes, separándolo un poco etc. pero eso lo vemos en otro post ;)

Esta entrada fue publicada en CSS, HTML y etiquetada , , . Guarda el enlace permanente.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *