html - posicionamiento - posicionar div css

Margen no deseado en los elementos de la lista de bloque en línea

Question

Esta pregunta ya tiene una respuesta aquí:

• Un espacio entre los elementos de la lista de bloque en línea [duplicar] 8 respuestas

Tengo el siguiente 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, los elementos de la lista aparecen con un margen alrededor de ellos tanto en Firefox como en Chrome. En cuanto a firebug, los elementos de la lista no tienen ningún margen, pero parece que hay un espacio vacío entre ellos.

Si más tarde agrego más elementos de la lista a través de JavaScript usando

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

el "margen" no aparece alrededor de los nuevos elementos:

¿Alguna idea de qué demonios está pasando aquí?

Answer 1

Acabo de descubrir la razón por la que esto sucede. Parece que al usar el bloque en línea, se renderiza cualquier espacio en blanco dentro del elemento.

Entonces, en lugar de escribir

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

Debo escribir:

        <li>
            <div>first</div>
        </li><li><div>first</div>
        </li><li>....

Sin dejar espacios entre un li y su etiqueta de cierre. La razón por la que este espacio no apareció cuando se agrega a través de js es porque el método appendTo tiene todas las etiquetas sin espacios en blanco entre ellas. Sí, esto apesta pero es la única solución si no quiero usar float: left.

Solución encontrada aquí

Answer 2

Al ver esta publicación y las respuestas dadas, pensé que iba a explicar lo que está pasando aquí. Esto no es un error, pero en realidad es el comportamiento previsto del bloque en línea.

La mejor manera de ilustrar por qué este es el comportamiento correcto es con emoticones 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 se muestran, de forma predeterminada, como un bloque en línea (IE: un elemento de bloque que obedece al flujo en línea, muy parecido a un solo carácter de texto). En este caso, desearía que los dos emoticones colindan uno al lado del otro, pero aún querría un espacio entre ''ayer'' y el primer emoticón.

Espero que esto lo explique y también explique por qué el bloque en línea ha tardado tanto en ser totalmente compatible; En realidad, no hay muchos casos de uso para usarlo como estaba previsto.

Para responder a su pregunta, su mejor opción sería hacer esto:

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

ul li {
  float: left;
}

Answer 3

Cambio de display: inline-block en display: inline-block para display: table-cell también elimina el espacio.

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

Answer 4

Eliminar todas las etiquetas </li> No sé por qué pero esto soluciona su problema de margen.

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

Answer 5

En mi opinión, y en este caso, lo mejor es eliminar el espacio entre letras del padre del li y volver a ponerlo en el li .

Entonces su regla de 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*/ 

}

Answer 6

Encontré la respuesta a esta pregunta aquí: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

Él dice:

"... hay un inconveniente gigante [para el bloque en línea]. Es decir, dado que los elementos se vuelven en línea, el espacio en blanco de tu código HTML afectará la representación. Eso significa que si tenemos espacio entre los elementos LI en nuestro código, generará un margen de 4 píxeles a la derecha de cada elemento ".

Entonces, la solución es eliminar los saltos de línea entre elementos de inline-block .

  <ul>
    <li><a href="#">Make</a></li>
    <li><a href="#">Love</a></li>
    <li><a href="#">Not</a></li>
    <li><a href="#">War</a></li>
  </ul>

Se convierte en ...

<ul>
    <li>
      <a href="#">Make</a>
    </li><li>
      <a href="#">Love</a>
    </li><li>
      <a href="#">Not</a>
    </li><li>
      <a href="#">War</a>
    </li>
</ul>

Y los molestos márgenes desaparecen.

Answer 7

Encontré un truco muy bueno para superar este mismo problema. Los elementos de mi lista en mi menú principal tenían márgenes de espacio en blanco entre cada uno después de que soltara "flotar: izquierda"; a favor de "display: inline-block;".

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

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

Trabajó para mi.

Answer 8

Esto es causado por la display: inline-block;

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

Cambiarlo para float: left; .

Pensé que era el almohadillado, pero eché un vistazo más de cerca y resultó que era la pantalla :)

Ejemplo aquí .

Después de más investigaciones , descubrí que inline-block es un método dependiente del espacio en blanco y representa un margen de 4 píxeles a la derecha de cada elemento.

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

Espero que ayude :)

Answer 9

Intente cambiar su ''pantalla: bloque en línea'' a ''flotar: izquierda''. La separación que estás viendo luego desaparece. Aquí hay un jsFiddle para que juegues:

http://jsfiddle.net/rcravens/XD9SD/

Chelín

Answer 10

Prueba esta solución:

    <ul><!--
        --><li><div>first</div></li><!--
        --><li><div>first</div></li><!--
        --><li><div>first</div></li><!--
        --><li><div>first</div></li><!--
    --></ul>