允許在不能有換行符的相鄰元素之間換行

Question

我有一個HTML表單，其中包含一大排複選框和標籤。它足夠大以包裹第二條物理線路。我試圖確保每個標籤都保留在其複選框旁邊（而不是第一行以複選框結尾，標籤在下一行的開始處），方法是將每對標籤包裝在跨度中，禁止使用white-space: nowrap進行換行。

這有效，但會導致副作用。

在Chrome瀏覽器中，該行在允許的位置被破壞，但稍微晚了一點。如果第一行有7個複選框和標籤的空間，則將其中的8個放在那裏，溢出父元素的右邊框，然後繼續下一行的第9對。

在IE9中，線路根本不會中斷，只會以巨型溢出而告終。

http://jsfiddle.net/pmhrx/1/顯示IE問題，並且在創建該問題時，我意外發現了一個奇怪的解決方法：如果在結束標記</span>之前沒有元素間空白，IE會正確添加換行符！請參閱小提琴中的div2和div2a - 它們之間唯一的區別是額外的空格和IE使它們呈現出不同的效果。

這裏發生了什麼，如何正確修復它？ （請喜歡迫使一切確切的像素寬度和手動打破行沒有兩輪牛車 - 複選框的名單是動態的）

Answer 1

好吧，如果我正確理解你想要的是保持所有的檢查和標籤在一起。 對於您可以使用此屬性：

span { 
    display:inline-block; 
} 

要使用「NOWRAP」屬性僅適用於文本應用。

在這裏看到你的榜樣http://jsfiddle.net/pmhrx/3/

Answer 2

我想這是其中僅使用<table>的和text-align:left;或right;將被證明是解決案件之一這比像素黑客更容易，除非我誤解你的目標。