problema de espacio XHTML lineBreak

Question

Básicamente tengo una lista ul

<ul>
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li>
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li>
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li>
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li>
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li>
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li>
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li>
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li>
</ul>

Ahora los estilos de la lista es la siguiente:

li {
    display:inline-block;
    margin:5px 0 0 8px;
    width:73px;
    overflow:hidden;
}


li a {
    display:block;
    background:url(../images/gtborder.png);
    width:73px;
    height:55px;
}
li:hover {
    background-position:0px -55px;
}

Ok, ahora, la brecha entre cada lista debe ser exactamente 8 píxeles, pero cuando veo que en un navegador ... su mroe entonces 8 píxeles. Su causa de la nueva línea.

Si tuviera todas las etiquetas li en una línea, que estaría bien, pero Realmente no quiero hacer eso. ¿Hay alguna manera puedo mantener mi html tal como es y simplemente editar el css de modo que esto no es el espacio más ahí?

Answer 1

Bueno, ya que configura los elementos de la lista para ser inline-block el espacio en blanco entre estos elementos en su margen de beneficio (es decir, la sangría) es lo que está causando problemas aquí. por lo tanto, dos elementos de la lista están separados por un espacio en blanco y el margen a la izquierda de cada elemento de la lista.

Solución:. Trate de flotar los elementos de la lista o deshacerse de los espacios en blanco entre las etiquetas de lista

Buena suerte.

Answer 2

Entendido

Hay un espacio entre cada etiqueta li - lo quité:

http://jsfiddle.net/j5yDd/1/

respuesta original ::

También tiene un margen superior de 5px lo que el espacio será de 13, es necesario eliminar el margen superior 5px.

er. ¿está seguro de que este es el css exacta -. como está escrito tiene un margen superior de 5px y un margen izquierdo de 8. No veo ningún margen inferior a todos

http://jsfiddle.net/j5yDd/