Evitar el espacio extra entre elementos de lista en línea

Por kcmr, el 15 de abril de 2009 en CSS, HTML

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

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

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

Demo.

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
Por jotor, el 12 de septiembre de 2009

Llevaba dos dias con este problema. Gracias.
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
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.

Uninstallme