¿Cómo puedo evitar que la nueva línea agregue un espacio entre mis elementos de lista en HTML

Question

Tengo el siguiente código HTML;

li 
{ 
    list-style: none; 
    border: solid 1px blue; 
    display: inline; 
    margin: 0px 0px 0px 0px; 
} 
... 
<ul> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 2</li> 
</ul> 

Cuando agrego los elementos de la lista en su propia línea, aparecen con un espacio horizontal entre ellos, pero cuando lo hago como;

<li>Item 1</li><li>Item 2</li><li>Item 2</li> 

they dont.

¿Hay alguna forma de evitar que la nueva línea aparezca como espacio en blanco, o necesito usar un margen negativo?

Answer 1

La razón hay espacio entre ellos es porque no hay espacio entre ellos. :-)

Puede flotar los li 's hacia la izquierda y que va a deshacerse de él:

li { float: left; } 

Ciao!

Answer 2

Aplicar float propiedad a Li y el uso de CSS reset o al menos:

* { 
margin:0; 
padding:0; 
} 

Answer 3

Ese espacio es correcto con contenido en línea. Tiene dos alternativas:

1. Colóquelos en la misma línea como lo hace; o
2. Use flotadores.

Por ejemplo:

ul { overflow: hidden; } 
li { float: left; border: solid 1px blue; margin: 0px; } 

El overflow: hidden asegura la <ul> que contiene no se derrumbe. Compare la diferencia con y sin ella si agrega un borde rojo al <ul>.

Answer 4

puede eliminar dicho espacio mediante el uso de comentarios HTML:

<ul> 
    <li>Item 1</li><!-- 
--><li>Item 2</li><!-- 
--><li>Item 2</li> 
</ul> 

También hay una propiedad CSS con el apoyo de los nuevos navegadores, pero no puedo recordar lo que se llama (se trata de una consulta de búsqueda duro).

Answer 5

Para evitar estos espacios puede utilizar flex propiedad CSS

ul { 
    display: flex; 
} 

Ver example.