垂直位置風格的單選按鈕系列

Question

我有以下的html。

<td> 
    <div id="form_comparison" class="field radio_field"> 
     <input type="radio" id="form_comparison_0" name="form[comparison]" value="1"/> 
     <label for="form_comparison_0">Increased</label> 
     <input type="radio" id="form_comparison_1" name="form[comparison]" value="2" /> 
     <label for="form_comparison_1">About the same</label> 
     <input type="radio" id="form_comparison_2" name="form[comparison]" value="3" /> 
     <label for="form_comparison_2">Decreased</label> 
    </div> 
</td> 

用css，我怎麼可以垂直放置單選按鈕，使剛剛在同一行各自的單選按鈕後顯示的標籤？

Answer 1

Working FIDDLE Demo

浮法您input和label，以及第二排，clear的float做出新行：

#form_comparison input { 
    float: left; 
} 

#form_comparison label { 
    float: left; 
} 

#form_comparison label + input { 
    clear: both; 
} 

Answer 2

我不知道爲什麼你把這個包裹在td元素中，如果你正在設計一個表單佈局，而不是忽略表格並且使用div來設計你的表單。來到你的問題，你可以環繞input標籤的標籤和使用label這樣

<label for="form_comparison_0"> 
    <input type="radio" id="form_comparison_0" name="form[comparison]" value="1"/> 
    Increased 
</label> 

Demo

---

使用display: block;爲label

#form_comparison label { 
    display: block; 
} 

包裝每個input如果你不沒有任何權限來更改標記，您可以使用CSS content財產與white-space: pre;，並且會給你所需的輸出

label:after { 
    content: "\A"; 
    white-space: pre; 
    margin-bottom: 10px; 
} 

Demo（沒有變化在標記）

注意：使用#form_comparison label而不是僅label，因爲它會 選擇和應用的所有label元素在你的網站裏面 #form_comparison label只會選label裏面的元素 #form_comparison