Quelle est ma meilleure option pour l'espacement fixe conforme aux normes XHTML?

Question

J'essaie d'espacer les éléments de ce menu avec exactement le même nombre de pixels. Dans les années 90, la plupart des développeurs Web que je connaissais utilisaient des espaces ou un gif d'espacement. Ces travaux, mais ils se sentent comme de mauvais hacks pour moi. Il doit y avoir une meilleure façon de le faire en 2009! Je suis plus un codeur back-end, donc j'ai été hors de la boucle pendant un moment. J'apprécierais n'importe quelle aide ...

<div class="menu"> 
    <a href="#">Item 1</a> &nbsp:&nbsp:&nbsp:&nbsp:&nbsp: (replaced the semicolon with a colon so that these would show up) 
    <a href="#">Item 2</a> <img src="spacer.gif" /> 
    <a href="#">Item 3</a> 
    <a href="#">Item 4</a> 
</div> 

Answer 1

Vous pourriez jeter un id/class sur l'élément d'ancre et avoir le bon remplissage.

<div class="menu"> 
    <a href="#">Item 1</a id="bar"> &nbsp:&nbsp:&nbsp:&nbsp:&nbsp: 
    <a href="#">Item 2</a> 
    <a href="#">Item 3</a> 
    <a class="last" href="#">Item 4</a> 
</div> 

<style type="text/css"> 
#bar { padding-right:5px; } 
</style> 

Si vous voulez aller quelque chose de plus générique, sur tous les points d'ancrage, mais le dernier:

.menu a { padding:0 5px 0 0; } 
.menu a.last { padding-right:0; } 

Answer 2

Utilisez CSS, bien sûr! Plus précisément, puisque vous avez demandé, appliquez des styles à vos éléments d'ancrage. Quelque chose comme:

div.menu { width: 480px; } 

div.menu a{ 
    margin:0; 
    display:block; 
    float:left; 
    width:120px; 
} 

peut faire ce que vous voulez. En bonus, tout le bloc agira comme un lien, donc vous obtiendrez un comportement plus comme un bouton qu'un lien texte, ce qui est probablement ce que vous recherchez puisqu'il s'agit d'un menu. Définir une largeur explicite sur le div de .menu empêchera vos flotteurs d'envelopper si la fenêtre est trop étroite.