separar - ol html

La mejor forma de administrar espacios en blanco entre elementos de 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''s. Puedo eliminar los espacios en blanco al colapsarlos 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 clara de hacerlo.

Answer 1

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

Answer 2

El problema es el tamaño de fuente en 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>

Answer 3

Lo que realmente quieres es el colapso de espacio en blanco de CSS3 : descartar . Pero no estoy seguro si algún navegador realmente admite esa propiedad.

Un par de soluciones alternativas es permitir 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 es utilizar 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 thismat si está bien usando flotadores, y dependiendo de los requisitos, es posible que necesite agregar un <li> final que está configurado para clear: both; .

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

Answer 4

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

Answer 5

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>

construye tu código html así (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 6

Una mejor solución para los artículos de la lista es usar:

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

Tiene exactamente el mismo efecto visual sin dolor de cabeza.

Answer 7

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, dejé fuera el vuelo estacionario 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 mantener 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 creo 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.

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>