mejor manera de gestionar los espacios en blanco entre los elementos de la lista en línea

Mi HTML es el siguiente:mejor manera de gestionar los espacios en blanco entre los elementos de la lista en línea

<ul id="nav"> 
    <li><a href="./">Home</a></li> 
    <li><a href="/About">About</a></li> 
    <li><a href="/Contact">Contact</a></li> 
</ul>

Y mi css:

#nav { 
    display: inline; 
}

Sin embargo, el espacio en blanco entre el li de muestra. Puedo eliminar el espacio por el colapso de ellos de esta manera:

<ul id="nav"> 
    <li><a href="./">Home</a></li><li><a href="/About">About</a></li><li><a href="/Contact">Contact</a></li> 
</ul>

Pero esto está siendo mantenido en gran medida con la mano y me preguntaba si había una forma más limpia de hacerlo.

Fuente

2008-10-27 Anonymous

Hay varias opciones aquí, primero te voy a dar mi práctica normal cuando la creación de listas en línea:

<ul id="navigation"> 
    <li><a href="#" title="">Home</a></li> 
    <li><a href="#" title="">Home</a></li> 
    <li><a href="#" title="">Home</a></li> 
</ul>

A continuación, el CSS para que funcione según lo que la intención:

#navigation li 
    { 
    display: inline; 
    list-style: none; 
    } 
#navigation li a, #navigation li a:link, #navigation li a:visited 
    { 
    display: block; 
    padding: 2px 5px 2px 5px; 
    float: left; 
    margin: 0 5px 0 0; 
    }

Obviamente Salí el flotar y los juegos activos, pero esto crea una buena navegación a nivel de bloque, y es un método muy común para hacer esto sin dejar de cumplir con los estándares./* recuerde ajustar a su gusto, agregue color al fondo, etcétera */

Si desea mantenerlo solo con texto y solo en línea, no hay elementos de bloque que crea que le gustaría agregar:

margin: 0 5px 0 0; /* that's, top 0, right 5px, bottom 0, left 0 */

Al darse cuenta de que desea QUITAR el espacio en blanco, simplemente ajuste los márgenes/relleno en consecuencia.

Fuente

2008-10-27 21:58:17 thismat

¿No tiene suficiente representante para editarlo yo mismo, pero "#navegación ul li" en tu CSS debe reemplazarse donde aparezca por "#navegación li". –

Totalmente extrañado, lo actualizaré, gracias. – thismat

'float: left;' salvó el día! Entonces, ¿cuál es la causa de este espacio en blanco fantasma? ¿Alguien sabe? –

Lo que realmente quieres es el CSS3 white-space-collapse: discard. Pero no estoy seguro si algún navegador realmente admite esa propiedad.

Un par de soluciones alternativas es dejar que el extremo final de una etiqueta consuma el espacio en blanco. Por ejemplo:

<ul id="nav" 
    ><li><a href="./">Home</a></li 
    ><li><a href="/About">About</a></li 
    ><li><a href="/Contact">Contact</a></li 
></ul>

Otra cosa que he visto hacer es utilizar los comentarios HTML para consumir espacio en blanco

<ul id="nav"><!-- 
    --><li><a href="./">Home</a></li><!-- 
    --><li><a href="/About">About</a></li><!-- 
    --><li><a href="/Contact">Contact</a></li><!-- 
--></ul>

solución

Sede de thisMat si estás bien usando flotadores, y en función de las necesidades que pueda necesitar para agregar un <li> final que se establece en clear: both;.

Pero la propiedad CSS3 es probablemente la mejor manera teórica.

Fuente

2010-06-29 18:05:28

Esto es realmente complicado e innecesario. – mahalie

Gracias por esto necesitaba evitar el flotador y esto me permitió hacerlo. – Rob

Otra forma útil de eliminar el espacio en blanco es establecer la propiedad font-size de la lista en 0 y los elementos de la lista 'volverán al tamaño requerido.

Fuente

2010-09-01 10:57:53

Si necesita centrar una lista de bloque en línea (es decir, flotante no es realmente una opción), esto es increíble. Gracias – Djave

Este método parece tener un problema en los navegadores Android - Investigación: http://codepen.io/stowball/details/LsICH –

Adopte HTML no basado en XML y omita </li>.

<ul id="nav"> 
    <li><a href="./">Home</a> 
    <li><a href="/About">About</a> 
    <li><a href="/Contact">Contact</a> 
</ul>

A continuación, establezca la propiedad de visualización de los elementos en bloque en línea en lugar de en línea.

#nav li { 
    display: inline-block; 
    /display: inline; /* for IE 6 and IE 7 */ 
    /zoom: 1; /* for IE 6 and IE 7 */ 
}

Fuente

2011-01-31 09:29:58 guimihanui

Una mejor solución para elementos de la lista es el uso de:

#nav li{float:left; width:auto;}

tiene exactamente el mismo efecto visual sin el dolor de cabeza.

Fuente

2011-08-05 14:55:21 Louisa

<html> 
<head> 
<style> 
ul li, ul li:before,ul li:after{display:inline; content:' '; } 
</style> 
</head> 
<body> 
<ul><li>one</li><li>two</li><li>three</li></ul> 
<ul> 
    <li>one</li> 
    <li>two</li> 
    <li>three</li> 
</ul> 
</body> 
</html>

Fuente

2013-01-30 06:41:26 user2024227

El problema es el tamaño de fuente en el UL. Establézcalo en 0 y desaparecerá, pero no desea que el texto actual sea tan pequeño, por lo tanto, establezca el tamaño de letra LI en lo que quiera que sea.

<ul style="font-size:0px;"> 
<li style="font-size:12px;"> 
</ul>

Fuente

2013-06-04 02:00:26 user764728

Tuve el mismo problema y ninguna de las soluciones anteriores podría solucionarlo. Pero descubrí que esto funciona para mí:

lugar de esto:

<ul id="nav"> 
    <li><a href="./">Home</a></li> 
    <li><a href="/About">About</a></li> 
    <li><a href="/Contact">Contact</a></li> 
</ul>

construir su código html como esto (espacio en blanco antes y después del texto del enlace):

<ul id="nav"> 
    <li><a href="./"> Home </a></li> 
    <li><a href="/About"> About </a></li> 
    <li><a href="/Contact"> Contact </a></li> 
</ul>

Fuente

2014-10-10 20:16:20 micha

Por qué el voto hacia abajo? Funciona muy bien y, en mi opinión, es el hackaround menos doloroso. – micha

después de horas de búsqueda solución muy simple. Gracias @micha – Prabhakaran

mejor manera de gestionar los espacios en blanco entre los elementos de la lista en línea

Respuesta

Cuestiones relacionadas