XHTML sauts de ligne-réglage pour plusieurs balises d'ancrage avec plusieurs images à l'intérieur

Question

Compte tenu de ce code exemple:

<div style="width:300px;"> 
    <a href="#"> 
     <img src="images/bracket_open.png"/> 
     <img src="images/1.png"/> 
     <img src="images/bracket_close.png"/> 
    </a> 
    <a href="#"> 
     <img src="images/bracket_open.png"/> 
     <img src="images/2.png"/> 
     <img src="images/bracket_close.png"/> 
    </a> 
    <a href="#"> 
     <img src="images/bracket_open.png"/> 
     <img src="images/3.png"/> 
     <img src="images/bracket_close.png"/> 
    </a> 
</div> 

Fondamentalement, une longue liste de balises d'ancrage qui contiennent des balises d'images multiples (à cause de la police) qui composent quelque chose comme [1] [2] [3] et ainsi de suite.

Comment faire en sorte que les sauts de ligne se produisent uniquement entre les points d'ancrage et jamais entre les points d'image à l'intérieur des points d'ancrage.

Je préfèrerais une solution XHTML/CSS plutôt que JavaScript si cela existe.

Merci.

Answer 1

Simple nowrap ne fonctionne pas?

div a { 
    white-space:nowrap; 
    } 

Avec HTML comme

<a href="#"><span>[</span><span>1</span><span>]</span></a><a href="#"><span>[</span><span>2</span><span>]</span></a><a href="#"><span>[</span><span>1</span><span>]</span></a>... 

Vous pouvez également utiliser:

div a { 
    float:left; 
    white-space:nowrap; 
    } 

Mais ce n'est pas assez élégant en raison de faire des éléments en ligne flottent sans raison de poids.