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

Question

Mi HTML es el siguiente:

<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, aparece el espacio en blanco entre los li.Puedo eliminar los espacios en blanco contrayéndolos así:

<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 se mantiene en gran medida a mano y me preguntaba si había una forma más limpia de hacerlo.

Answer 1

Varias opciones aquí, primero le daré mi práctica normal al crear 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>

Luego, el CSS para que funcione como lo desea:

#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, omití el desplazamiento y los conjuntos 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. / * recuerda ajustar a tu gusto, agregar color al fondo, etcétera * /

Si desea mantenerlo solo con texto y solo en línea, no creo que desee agregar elementos de bloque:

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

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

Answer 2

Otra forma útil de eliminar los espacios en blanco es establecer el valor de la lista. font-size propiedad a 0 y el de los elementos de la lista vuelve al tamaño requerido.

Answer 3

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

Un par de soluciones alternativas es dejar que el 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 usar comentarios HTML para consumir espacios 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>

Vea la solución de este tapete si está bien usando flotadores, y dependiendo de los requisitos, es posible que necesite agregar un <li> final que se establece en clear: both;.

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

Answer 4

Una mejor solución para los elementos de la lista es usar:

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

Tiene exactamente el mismo efecto visual sin dolor de cabeza.

Answer 5

Adopta HTML no basado en XML y omite </li>.

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

Luego 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 */
}

Answer 6

El problema es el tamaño de fuente en la UL. Ajústelo a 0 y desaparecerá, pero no desea que su texto real sea tan pequeño, así que configure el tamaño de la fuente LI en lo que quiera que sea.

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

Answer 7

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

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

construya su código html de esta manera (espacios 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>

Answer 8

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