Question

我有一个复选框列表，每个复选框都有一个标签：

    <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结构，我需要每对复选框标签出现在一个新行中。 Like this。是否可以只使用CSS？

Answer 1

关于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

Answer 2

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

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

唯一的问题是该示例没有显示父元素的更多信息，使容器元素溢出：隐藏和/或清除：可能需要两者来防止最后一个标签旁边的浮动元素。（用容器div编辑jsfiddle代码）

复选框的CSS格式

2 个答案: