83 votos

No deseados margen en línea con bloque de elementos de la lista

Tengo el siguiente código HTML:

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

y las siguientes reglas css:

        ul {
            padding: 0;
            border: solid 1px #000;
        }
        li {
            display:inline-block;
            padding: 10px;
            width: 114px;
            border: solid 1px #f00;
            margin: 0;
        }

        li div {
            background-color: #000;
            width: 114px;
            height: 114px;
            color: #fff;
            font-size: 18px;
        }

Por alguna extraña razón, la lista de elementos aparecen con un margen alrededor de ellos, tanto en Firefox y Chrome. Mirando firebug, los elementos de la lista no tiene ningún margen de todo, pero parece ser que hay un espacio vacío entre ellos.

Si yo luego añadir más elementos de la lista mediante el uso de javascript

$('<li><div>added via js</div></li>').appendTo($('ul'));

el "margen" no aparece en torno a los nuevos elementos:

Unwanted margins

Alguna idea de qué diablos está pasando aquí?

116voto

Kyle Sevenoaks Puntos 29929

Esto es causado por la display: inline-block;

li {
    display: inline-block;
    padding: 10px;
    width: 114px;
    border: solid 1px #f00;
    margin: 0;
}

Cambiar a float: left;.

Pensé que era el relleno, pero tomó una mirada más cercana, y resulta que era la pantalla :)

Ejemplo aquí.


Después de más investigación he descubierto que inline-block es un espacio en blanco método dependiente y representa un 4px margen a la derecha de cada elemento.

Para evitar esto, usted podría ejecutar todo su lis juntos en una línea, o bloquear las etiquetas de cierre y comenzar etiquetas juntos como este:

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

Ejemplo aquí.

Espero que ayude :)

68voto

Ryan Puntos 399

He encontrado un truco muy bueno para la superación de este mismo problema. Mi lista de elementos en el menú de la parte superior había un espacio en blanco de los márgenes entre cada uno después de que se me cayó "float:left;" en favor de "display:inline-block;".

Ajuste el tamaño de fuente de la lista desordenada a "0", es decir:

ul { font-size:0; }
li { font-size:18px; }

Trabajó para mí.

9voto

Will Tomlins Puntos 482

Viendo este post y las respuestas dadas, pensé que me iba a explicar lo que está pasando aquí. Esto no es un error, pero en realidad es la intención de comportamiento del inline-block.

La mejor manera de ilustrar esto es el comportamiento correcto es con emoticonos en un párrafo:

<p>
  Hi, really glad to hear from you yesterday 
  <img src="annoying_smiley.gif"/><img src="annoying_smiley.gif"/>.
</p>

Las imágenes son, por defecto, se muestran como inline-block (es decir: un elemento de bloque que obedece a la línea de flujo se parece mucho a un solo carácter de texto). En este caso usted quisiera que los dos smileys a tope uno al lado del otro, pero usted todavía desea un espacio entre el 'ayer' y el primer emoticono.

Espero que esto lo explica, y también explica por qué inline-block ha tomado tanto tiempo para ser totalmente compatible; realmente no Hay muchos casos de uso para su utilización según lo previsto.

Para responder a su pregunta, su mejor apuesta sería la de hacer esto:

ul {
  height: some set height
       /* OR */
  overflow-y: auto;
}

ul li {
  float: left;
}

7voto

DontShootMe Puntos 71

En mi opinión y en este caso lo mejor que puedes hacer es eliminar el espaciado de letras de la li's padre y volver a ponerlo en la li!

Así que su regla CSS:

ul{
    padding: 0;
    border: solid 1px #000;
    letter-spacing  :-4px; /*Remove the letter spacing*/
}
li{
    display:inline-block;
    padding: 10px;
    width: 114px;
    border: solid 1px #f00;
    margin: 0;
    letter-spacing  :0px; /*Put back the letter spacing*/ 

}

5voto

cps7 Puntos 456

Quitar todos los </li> etiquetas. No sé por qué, pero esto soluciona tu problema de margen.

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

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X