• Saltar a la navegación principal
  • Saltar al contenido principal

Galatar

Programación Web de cero a infinito

  • Inicio
  • Acerca de
Usted está aquí: Inicio / CSS / Como crear una lista horizontal con HTML y CSS

Como crear una lista horizontal con HTML y CSS

25 junio 2018 by Juanan Ruiz 1 comentario

Iconos con distribución vertical y horizontal

Si lo piensas un poco HTML es un lenguaje enfocado a apilar los contenidos verticalmente. Los únicos contenidos que quedan alineados horizontalmente son los que están dentro de una misma etiqueta o los que utilizan etiquetas de caracteres como <b>, <i>, <a>, <span>

El resto de etiquetas va enfocada a bloques y la disposición por defecto es que se alineen verticalmente <h1>, <p>, <div>, <li>, <dd>, <dt>

La única etiqueta de bloque que te permite alinear contenido horizontalmente es la de la celda de una tabla <td> y ahí caemos todos, muy mal 🙁

Las tablas solo deben usarse para mostrar contenido que deba ir alineado en filas y columnas, vaya, para datos tabulados. Utiliza la siguiente regla: si los elementos de una fila determinada se pueden pasar a la fila siguiente sin que la información pierda sentido entonces quizás no debería estar usando una tabla. Por ejemplo imagina que quieres poner una serie de productos de una tienda online en una rejilla para que no ocupen tanto espacio, ¡no uses una tabla!.

¿Que haces entonces? ¡CSS al rescate! CSS te permite cambiar esta manía apilatoria del HTML y permitir distribuir elementos de manera horizontal de manera mucho más efectiva y responsiva que como lo haría una tabla. En el ejemplo anterior de los productos online sólo tienes que poner cada producto dentro de una etiqueta <div> y asignarle el estilo float: left; en el CSS para que queden alineados horizontalmente, además el número de artículos en cada fila se ajustará automáticamente al ancho de la pantalla.

Cuando los elementos que queremos distribuir horizontalmente son más sencillos no deberíamos usar <div> sino las etiquetas para listas de HTML: <ul> <li> Es el caso típico de un menú de navegación, una lista de iconos de redes sociales o cualquier caso parecido. Vamos a ver un ejemplo con texto y luego otro con imágenes o iconos.

Para hacer un menú de opciones deberíamos entonces hacer algo así:

1
2
3
4
5
6
7
8
9
10
11
<style>
  ul.navega li {
        display: inline;
  }
</style>
<ul class="navega">
  <li>Inicio</li>
  <li>Blog</li>
  <li>Tienda</li>
  <li>Contactar</li>
</ul>

Como ves lo único que necesitas es definir una clase para la lista e indicar mediante CSS que muestre los elementos de esa lista en formato 'inline'.

Ahora te propongo "jugar" un poco con este ejemplo. Duplica o triplica el número de elementos de la lista y luego prueba a reducir el ancho de la ventana de tu navegador. Verás como el contenido se adapta al ancho, esto es algo que no sucedería con una tabla, pruébalo también. (Para poder cambiar el código utiliza el enlace «Edit on CodePen que aparece en la ventana inferior)

See the Pen Listas horizontales by Juanan (@juananruiz) on CodePen.

Puedes hacer algo parecido con iconos

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
  @import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);
  .social-icons li {
    vertical-align: top;
    display: inline;
    font-size: 1.2em;
    padding: 0.5em;
  }
</style>
<ul class="social-icons">
  <li><a href="" class="social-icon"> <i class="fa fa-facebook"></i></a></li>
  <li><a href="" class="social-icon"> <i class="fa fa-twitter"></i></a></li>
  <li><a href="" class="social-icon"> <i class="fa fa-rss"></i></a></li>
  <li><a href="" class="social-icon"> <i class="fa fa-youtube"></i></a></li>
  <li><a href="" class="social-icon"> <i class="fa fa-google-plus"></i></a></li>
</ul>

See the Pen Menú horizontal con iconos by Juanan (@juananruiz) on CodePen.

Archivado en: CSS




Comentarios

  1. roger dice

    20 abril 2021 en 02:28

    hola espero que estes muy bien la verdad te doy una recomendacion para que tu pagina salga que es seguro tienes que poner la politica y privacidad de cokies me gusto tu pagina muchas gracias por la informacion

    Responder

Deja una respuesta Cancelar la respuesta

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Copyright © 2022 · Aspire Pro on Genesis Framework · WordPress · Iniciar sesión