CSS格式複選框

我有一個複選框列表，每一個都帶有一個標籤：CSS格式複選框

<input type="checkbox" id="patient-birth_city" name="patient-birth_city" /> 
    <label for="patient-birth_city">(_PATIENT_BIRTH_CITY_)</label> 
    <input type="checkbox" id="patient-birth_state" name="patient-birth_state" /> 
    <label for="patient-birth_state">(_PATIENT_BIRTH_STATE_)</label> 
    <input type="checkbox" id="patient-birth_country" name="patient-birth_country" /> 
    <label for="patient-birth_country">(_PATIENT_BIRTH_COUNTRY_)</label>

Without using any CSS它們在同一行顯示（我想他們有一個默認的「內聯」或「塊直列「顯示）。問題是我無法修改HTML結構，我需要每對checkbox-label出現在一個新行中。 Like this。有沒有可能只使用CSS？

來源

2011-08-31 Ivan

好事約label標籤是你可以包裝input元素：

<label> 
    <input type="checkbox" id="birth_city" name="birth_city" /> 
    City 
</label> 
<label> 
    <input type="checkbox" id="birth_state" name="birth_state" /> 
    State 
</label> 
<label> 
    <input type="checkbox" id="birth_country" name="birth_country" /> 
    Country 
</label>

如果你添加下面的CSS：

label { 
    display: block; 
}

它將顯示它你想要的。

演示here

，因爲你不能編輯HTML，CSS這將工作：

input, label { 
    float: left; 
} 

input { 
    clear: both;  
}

演示here

來源

2011-08-31 08:41:26 Tomgrohl

他說他不能修改html結構，所以這不是一個解決方案。請閱讀這個問題。 – Willem

@Willem，哦，是誤讀那部分。 – Tomgrohl

使用float：left和clear：left你可以只用css做到這一點。演示：http://jsfiddle.net/VW529/2/

input {margin:3px;} 
input, label {float:left;} 
input {clear:left;}

唯一的問題是，例如沒有顯示的父元素的更多信息，給容器元件溢出：隱藏和/或明確的：既可能需要防止浮動元素旁最後的標籤。（用div容器編輯的jsfiddle代碼）

來源

2011-08-31 08:40:22 Willem

誰給了這一個-1：請解釋爲什麼！ – Willem

+1 Clear和Float可能是唯一的方法，因爲HMTL結構不能改變，所以我也不確定。 – Tomgrohl

是的，編輯我的代碼，溢出：隱藏是所有需要的，位置：相對沒有效果（FF6） – Willem

CSS格式複選框

回答

相關問題