Uninstallme

Desarrollo front-end, estándares web, accesibilidad y más

Caso típico: lista centrada de enlaces al pie de página separados por barras u otro elemento.

Enlaces centrados en el pie de página

Enlaces centrados en el pie de página

Para que la lista aparezca centrada necesitamos que los elementos de lista se muestren en línea en vez de en bloque.


ul{text-align: center;}
li{display: inline; padding: 0 6px 0 5px; background: url(../img/separador.gif) 100% 50% no-repeat;}

Problema típico: la separación entre ítems no es igual en distintos navegadores, básicamente, entre Explorer y el resto.

Distinta separación entre elementos de lista en Explorer

Distinta separación entre elementos de lista en Explorer

Solución (muy vieja): evitar la separación (saltos de línea) entre los elementos de lista en el HTML.


<ul><li><a href="#">Lorem ipsum</a></li><li><a href="#">Sit amet</a></li><li><a href="#">Consectetuer</a></li></ul>

Se puede mejorar un poco la legibilidad del código y evitar tener toda la lista en una línea de esta forma:


<ul><li
><a href="#">Lorem ipsum</a></li
><li><a href="#">Sit amet</a></li
><li><a href="#">Consectetuer</a></li
></ul>

El resultado de usar esta técnica:

Misma separación entre elementos de lista en todos los navegadores

Misma separación entre elementos de lista en todos los navegadores

Demo.

Visto en CSS:Inline list, entre otras cosas muuuy interesantes.

4 comentarios

  1. Por javiaurea, el 17 de abril de 2009

    Me ha pasado y en su día me ha rucado mucho ese problema hasta dar con ello.

    Y yo que pensaba que era un obsesivo…

    Gracias por compartir tu conocimiento ;)

  2. Por jotor, el 12 de septiembre de 2009

    Llevaba dos dias con este problema. Gracias.

  3. Por jon, el 19 de agosto de 2010

    Como se podría llevar a cabo esto en magento, en la cuadricula de productos?

    Muchas gracias

  4. Por kcmr, el 19 de agosto de 2010

    @jon, en Magento puedes mostrar los LI del listado de productos como bloque, con lo que puedes controlar perfectamente el espacio entre cada ítem especificando margen o relleno. También puedes especificar el número de ítems por lista, aunque como todo, esto es una pequeña odisea.
    Si lo que quieres es añadir una clase al último LI de cada fila, puedes hacerlo con Javascript con algo del tipo $$(‘ul.products-list li:nth-child(4n)’).addClassName(‘last’), según la librería que uses. El ejemplo sería con Prototype (por defecto).
    Espero haberte ayudado.
    Saludos.

Deja tu comentario

Campos obligatorios marcados con asterisco *