2010-05-27 5 views
0

J'ai un problème où le dernier élément li d'un ul se pousse plus à gauche que le reste de mes pièces. Ci-joint une capture d'écran et mon code.Ul Li dernier élément ne s'aligne pas correctement

J'ai essayé d'utiliser l'élément last-child mais cela ne fonctionne pas dans Safari ou Chrome.

#attending ul { 
display: inline; 
margin: 0 5px 0 0; 
padding-left: 0px; 
} 
#attending ul li { 
display: inline; 
list-style-image:none; 
padding: 5px; 

} 
#attending li:last-child { 
    margin-right:-4px; 
    } 

Suggestions?

http://desmond.yfrog.com/Himg338/scaled.php?tn=0&server=338&filename=screenshot20100526at808.jpg&xsize=640&ysize=640

--------------- ÉDITÉ ----------------

#attending { 
width: 230px; 
margin:0 13px 5px 12px; 
float: left; 
background-image: url(...); 
background-repeat: no-repeat; 
text-align:center; 
height:360px; 
overflow:hidden; 

}

<div id="attending"> 
      <h2> Who's Attending <div id="eventtitle">Converge </div></h2> 
       <ul> 
       <li><a href='http://www.last.fm/user/IthisProtector' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/30769977.jpg' alt='IthisProtector' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/Jordan1124' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/46770143.jpg' alt='Jordan1124' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/redmedicine' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/1612965.jpg' alt='redmedicine' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/phillstac3' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/9373439.jpg' alt='phillstac3' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/hammajamma' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/1577940.gif' alt='hammajamma' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/tastemaker' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/31334281.jpg' alt='tastemaker' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/owlz' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/38409251.jpg' alt='owlz' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/cersei' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/16709925.png' alt='cersei' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/thenetsux' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/46964551.jpg' alt='thenetsux' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/Shwang_Shwinga' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/36391855.jpg' alt='Shwang_Shwinga' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/NightEndDay99' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/23687175.jpg' alt='NightEndDay99' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/aliciabandee' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/46562737.jpg' alt='aliciabandee' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/mcbaker2' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/5005584.jpg' alt='mcbaker2' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/killcarriedeadd' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/46160823.jpg' alt='killcarriedeadd' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/sexraptor89' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/44930901.gif' alt='sexraptor89' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/Johnny_Acidtrip' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/45211001.png' alt='Johnny_Acidtrip' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/chrismarzig' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/41573869.jpg' alt='chrismarzig' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/Lapp0' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/29210613.jpg' alt='Lapp0' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/iozephus' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/46560555.jpg' alt='iozephus' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/JoshTheChaos' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/41057871.jpg' alt='JoshTheChaos' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/ktdlmnop' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/46312475.jpg' alt='ktdlmnop' height=40px; width=40px; style='border:0px;'/></a></li><li><a href='http://www.last.fm/user/RheannaReverie' target='_blank'><img src='http://userserve-ak.last.fm/serve/34/46435589.jpg' alt='RheannaReverie' height=40px; width=40px; style='border:0px;'/></a></li>    </ul>     
      </div> 
+1

Vous devez également inclure le code HTML. Cela devrait être facile à résoudre, mais nous avons besoin de tout le code pour vraiment aider. – Gabriel

+0

J'ai du mal à visualiser cela avec l'aide de la capture d'écran. Est-ce que le '# participant 'a une largeur fixe? Chaque image est-elle représentée par un seul élément 'li'? Ou est-ce chaque rangée d'images? Quoi qu'il en soit, veuillez modifier et mettre à jour votre question pour inclure du code HTML pertinent. De préférence, un exemple copier'n'paste'n'runnable de '' jusqu'à ' '(et doctype) qui valide. – BalusC

+0

Je ne suis pas sûr quel doctype il est en tant que son wordpress en cours d'exécution. Laissez-moi vérifier cela très rapidement. Le voici: XHTML 1.0 Transitional Je suppose que j'ai besoin de modifier cela à strict? non? – codeisforeva

Répondre

0

Votre coupable est le text-align:center sur la règle #attending css.

vos li « s sont centrées car ils ont été convertis en inline

[mise à jour]

ok, j'avais mal compris le problème .. vous devez supprimer la marge de droite de 5px le ul et il se centre correctement ..

voici le résultat http://jsfiddle.net/uvXKb/

+0

Comment pourrais-je centrer cela à nouveau? J'aime le look de l'avoir centré ou est-ce que ce n'est tout simplement pas possible? – codeisforeva

+0

@Chase juste compris le problème ... supprimer la marge droite '5px' de la' ul' et il devrait centrer correctement .. –

+0

Fixé dans Firefox .. problèmes encore en safari et chrome. – codeisforeva

Questions connexes