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格式复选框

回答

相关问题