XHTML problème d'espace Linebreak

essentiellement i ont une liste ulXHTML problème d'espace Linebreak

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

maintenant les styles de la liste est la suivante:

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 le voir dans un navigateur ... son mroe puis 8px. C'est à cause de la nouvelle ligne.

Si j'avais tous les tags li sur une ligne, ce serait bien, mais je ne veux pas vraiment faire cela. Y a-t-il un moyen de garder mon HTML tel quel et de modifier le CSS de manière à ce que cet espace ne soit plus là?

Source

2010-11-18 Ozzy

salut Ozzy, je ne comprends pas vraiment la question. il y a en fait 8px entre chaque li. –

c'est un raccourci du navigateur, fondamentalement la nouvelle ligne entre le nombre de lis comme un espace entre le li. donc son infact 8px + la largeur de l'espace qui prend en compte font et fontsize. mais la mise en taille de fontsize à 0 ne fonctionnera pas parce que certains navigateurs laissent comme 1px au lieu de 0 – Ozzy

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 liste sont donc séparés par un espace et la marge à gauche de chaque élément de la liste.

Solution: Essayez de faire flotter les éléments de liste ou de supprimer les espaces entre les balises de liste.

Bonne chance.

Source

2010-11-18 20:44:17 aefxx

J'ai ajouté flottant: à gauche pour les styles LI ... travaillé comme un charme. merci :) – Ozzy

Soyez conscient du bug de marge flottante à double IE6, cependant. Voir ici: http://www.positioniseverything.net/explorer/doubled-margin.html. Réponse courte: utilisez un rembourrage plutôt qu'une marge lors de l'espacement dans la même direction. – aefxx

oui l'ancien double bug de marges ¬_¬ affichage: en ligne à la rescousse: D – Ozzy

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 5 pixels de sorte que le l'espace sera 13, vous devez supprimer la marge supérieure 5px.

er. Etes-vous sûr que c'est le css exact - comme écrit, vous avez une marge supérieure de 5px et une marge de gauche de 8. Je ne vois aucune marge inférieure du tout.

http://jsfiddle.net/j5yDd/

Source

2010-11-18 20:31:13

la seule marge qui m'inquiète est la marge gauche lol: P parce que le li est le bloc inline donc tout sur une ligne. juste les espaces entre les li sont plus que 8px – Ozzy

Oui, je vois maintenant - je l'ai vérifié dans le violon et il y a un espace aléatoire vraiment étrange là. –

@Ozzy voir mon édition –

Répondre

Questions connexes