使用CSS更改JQuery Mobile中复选框的宽度？

Question

我试图将我的3个复选框的宽度设置为每个33％，但无论我做什么，我都无法改变宽度。

我的HTML的表单/字段集部分如下所示：

<form class="form_attendance">
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" id="form_attendance">
    <legend>Attendance</legend>
    <input type="checkbox" name="checkbox1" id="checkbox1" class="selector">
    <label for="checkbox1">1</label>
    <input type="checkbox" name="checkbox2" id="checkbox2" class="selector">
    <label for="checkbox2">2</label>
    <input type="checkbox" name="checkbox3" id="checkbox3" class="selector">
    <label for="checkbox3">3</label>
</fieldset>
</form>

我尝试使用class和id为CSS中的input-form-和fieldset-components设置不同的宽度，但没有任何反应 。

有人有什么主意吗？

Answer 1

jQuery Mobile为您的代码添加了额外的类和html元素。 你需要针对那些。 最好的方法是使用浏览器检查器检查需要定位的元素。

在你的情况下你需要这个CSS：

#form_attendance .ui-controlgroup-controls {
    width: 100%
}

#form_attendance .ui-checkbox {
    width: 33%;
}

工作小提琴