XHTML Rahmen Zeilenumbrüche für mehrere Anker-Tags mit mehreren Bildern innerhalb

Question

In Anbetracht dieser Beispielcode:

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

Im Grunde eine lange Liste von Anker-Tags, die mehrere Image-Tags (wegen der Schrift) enthalten, die etwas machen wie [1] [2] [3] und so weiter.

Wie kann ich es so machen, dass die Zeilenumbrüche nur zwischen den Anchor-Tags und nie zwischen den Image-Tags innerhalb der Anchor-Tags auftreten.

Ich würde lieber eine XHTML/CSS-Lösung als JavaScript, wenn solche existiert.

Vielen Dank.

Answer 1

Simple nowrap funktioniert nicht?

div a { 
    white-space:nowrap; 
    } 

Mit HTML wie

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

auch können Sie verwenden:

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

Aber es ist nicht recht elegant durch Inline-Elemente ohne gewichtigen Grund zu machen schweben.