XHTML problème d'espace Linebreak

Question

En fait, j'ai une liste 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>

les styles de la liste est:

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 maintenant, l'écart entre chaque liste doit être exactement 8px mais quand je l'ai vue dans un navigateur ... son mroe puis 8px. Son à cause de la nouvelle ligne.

Si j'avais toutes les balises li sur une ligne, ce serait bien, mais je ne veux pas vraiment faire cela. Est-il possible que je peux garder mon html comme il est et juste modifier le css si cet espace isnt plus là?

Answer 1

Eh bien, puisque vous définissez les éléments de liste à inline-block l'espace entre ces éléments dans votre balisage (à savoir l'empreinte) est ce qui provoque des problèmes ici. Deux éléments de la liste sont donc séparés par un espace et la marge à gauche de chaque élément de la liste.

Solution:. Essayez de flotter les éléments de liste ou se débarrasser des espaces entre les balises de liste

Bonne chance.

Answer 2

Got it

Il y a un espace entre chaque balise li - je l'ai enlevé:

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

réponse originale ::

Vous avez également une marge supérieure de 5px sorte que l'espace sera 13, vous devez supprimer la marge supérieure 5px.

er. êtes-vous sûr que ce soit l'exacte css -. que vous avez écrit une marge supérieure de 5 pixels et une marge gauche de 8. Je ne vois aucune marge inférieure du tout

http://jsfiddle.net/j5yDd/