保持單選按鈕與他們的行標籤打破

我有一個HTML形式奠定了這樣的內容：
enter image description here 保持單選按鈕與他們的行標籤打破

我確實想將標籤內聯，使這部分將不會是7個換行符很高，但我想知道如何確保單選按鈕與標籤保持一致。

注意：標籤的長度不同，並且使用來自服務器的數據動態填充，所以我無法設置固定的寬度div而不會導致一些奇怪的間距問題。

如果有這樣做的慣用方式，請給我看看。

2011-07-16 Brandon H

將每個輸入/標籤對放在一個範圍內，然後在範圍上設置white-space: nowrap。事情是這樣的：

<div class="radios"> 
    <span> 
     <input type="radio" id="productTypeRC" /> 
     <label for="productTypeRC">RC</label> 
    </span> 
    ... 
</div>

CSS：

.radios > span 
{ 
    white-space: nowrap; 
}

編輯：以上技術在瀏覽器的錯誤，其中對不換行，而是被隱藏缺點。這個錯誤在Text doesn't wrap properly between elements having white-space: nowrap的問題中得到了證明。解決方案包括使用float: left，添加一些保證金以彌補摺疊間距，或者使用HTML，直到它工作。如果您只是將<input>和<label>與<span>作爲相同的行，它就可以工作。

<div class="radios"> 
    <span><input type="radio" id="productTypeRC" /> <label for="productTypeRC">RC</label></span> 
    <span><input type="radio" id="productTypeTC" /> <label for="productTypeTC">TC</label></span> 
    <span><input type="radio" id="productTypeNS" /> <label for="productTypeNS">NS</label></span> 
    ... 
</div>

jsfiddle.net/Z5uaT/57

來源

2011-07-16 00:17:22 gilly3

不錯，他們已經跨越了跨度。白色空間：nowrap對我來說是新的。我現在就試試。謝謝。 –

嗯。這隻能起作用。如果有太多的按鈕/標籤對需要放到新的線上，但使用白色空間的時候，它們不會。如果有必要的話，我希望整雙鞋都可以放到一條新線上。 –

我的不好。我沒有跨度之間的空間。這很好。謝謝。 –

把複選框標籤內（是的，這是有效的），並在標籤inline-block（見this JSfiddle用於演示）。 國際海事組織，這是一個比span包裝suggested by gilly3更優雅和語義的解決方案，這就是爲什麼我決定發佈，即使你已經接受了答案。

來源

2011-07-16 00:47:33 You

他在我找出錯誤之後編輯了他的答案。雙重包裝是沒有必要的。 –

保持單選按鈕與他們的行標籤打破

回答

相關問題