html - poner - Un espacio entre los elementos de la lista de bloque en línea

poner elementos en linea css

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Cómo elimino el espacio entre los elementos de bloque en línea? 32 respuestas

Posible duplicado:
Margen no deseado en los elementos de la lista de bloque en línea
Cómo eliminar "espacio invisible" de HTML

¿Por qué los elementos de la lista de bloque en línea tienen espacio en ellos? No importa cómo hago que mi lista de elementos en un menú, siempre tengo espacios.

li {
  border: 1px solid black;
  display: inline-block;
  height: 25px;
  list-style-type: none;
  text-align: center;
  width: 50px;
}
ul {
  padding: 0;
}

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

Answer 1

Agregaría la propiedad CSS de float left como se ve a continuación. Eso elimina el espacio extra.

ul li {
    float:left;
}

Answer 2

En realidad, esto no es específico para display:inline-block , pero también se aplica a la display:inline . Por lo tanto, además de la solución de David Horák, esto también funciona:

ul {
    font-size: 0;
}
ul li {
    font-size: 14px;
    display: inline;
}

Answer 3

Incluso si no está basado en inline-block , esta solución podría merecer la pena (permite casi el mismo control de formateo desde los niveles superiores).

ul {
  display: table;
}
ul li {
  display: table-cell;
}

• IE8 + y principales navegadores compatibles
• Relativo / fijo de tamaño de fuente independiente
• Formato de código HTML independiente (no es necesario pegar </li><li> )

Answer 4

Lo he visto y respondí antes:

Después de más investigaciones , descubrí que inline-block es un método dependiente del espacio en blanco y depende de la configuración de la fuente. En este caso, se representa 4px.

Para evitar esto, puede ejecutar todas sus líneas juntas en una línea, o bloquear las etiquetas finales y comenzar las etiquetas juntas de esta manera:

<ul>
        <li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li>
</ul>

Ejemplo aquí .

Como se menciona en otras respuestas y comentarios, la mejor práctica para resolver esto es agregar font-size: 0; al elemento padre:

ul {
    font-size: 0;
}

ul li {
    font-size: 14px;
    display: inline-block;
}

Esto es mejor para la legibilidad de HTML (evitando ejecutar las etiquetas juntas, etc.). El efecto de espaciado se debe a la configuración de espaciado de la fuente, por lo que debe restablecerlo para los elementos insertados y volver a establecerlo para el contenido dentro.

Answer 5

Otra solución, similar a la solución de Gerbus , pero esto también funciona con el tamaño relativo de la fuente.

ul {
    letter-spacing: -1em; /* Effectively collapses white-space */
}
ul li {
    display: inline;
    letter-spacing: normal; /* Reset letter-spacing to normal value */
}

Answer 6

Solución:

ul {
    font-size: 0;
}

ul li {
    font-size: 14px;
    display: inline-block;
}

Debe establecer el tamaño de fuente principal en 0

Answer 7

Tuve el mismo problema, cuando usé un bloque en línea en mi menú, tuve el espacio entre cada "li", encontré una solución simple, no recuerdo dónde lo encontré, de todos modos, esto es lo que hice.

<li><a href="index.html" title="home" class="active">Home</a></li><!---->
<li><a href="news.html" title="news">News</a></li><!---->
<li><a href="about.html" title="about">About Us</a></li><!---->
<li><a href="contact.html" title="contact">Contact Us</a></li>

Agregue un signo de comentario entre cada final de, y el inicio de: "li" Luego, el espacio horizontal desaparecerá. Espero que la respuesta a la pregunta Gracias

Answer 8

simplemente elimine las interrupciones entre li''s en su código html ... haga los li''s en una sola línea.