XHTML設定爲行分解爲多個圖像中的多個錨標記內

Question

考慮此示例代碼：

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

基本上包含多個圖像標籤（因爲字體的），使一些東西錨標記一個長長的清單如[1] [2] [3]等。

我該怎麼做才能讓斷線只發生在錨點標記之間，並且永遠不會發生在錨點標記內部的圖像標記之間。

如果存在的話，我會提供一個XHTML/CSS解決方案而不是JavaScript。

謝謝。

Answer 1

簡單的nowrap不起作用？

div a { 
    white-space:nowrap; 
    } 

隨着HTML一樣

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

您還可以使用：

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

但它不是相當完美，由於使行內元素浮動，沒有沉重的原因。