Como crear una lista horizontal con HTML y CSS

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í:

  <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.

Puedes hacer algo parecido con iconos

<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>