jquery - 将 CheckBoxList 标签的宽度设置为全宽(以允许选择行)

Question

这似乎是一个非常直截了当的问题，但我无法在这里(或通过 Google)找到具体答案。

我在覆盖的 div 中有一个 APS.Net CheckBoxList(模拟下拉选择列表)。

默认情况下，为 CheckBoxLIst 生成的 HTML 如下所示:

<table id="MainContent_DropDownCheckBoxList4_checkBoxList">
    <tbody><tr>
        <td><input type="checkbox" value="ALL" name="ctl00$MainContent$DropDownCheckBoxList4$checkBoxList$0" id="MainContent_DropDownCheckBoxList4_checkBoxList_0" class="dropdowncheck"><label for="MainContent_DropDownCheckBoxList4_checkBoxList_0" class="dropdownlabel">All</label></td>
    </tr><tr>
        <td><input type="checkbox" value="0" name="ctl00$MainContent$DropDownCheckBoxList4$checkBoxList$1" id="MainContent_DropDownCheckBoxList4_checkBoxList_1" class="dropdowncheck"><label for="MainContent_DropDownCheckBoxList4_checkBoxList_1" class="dropdownlabel">Item 0</label></td>
    </tr><tr>
        <td><input type="checkbox" value="1" name="ctl00$MainContent$DropDownCheckBoxList4$checkBoxList$2" id="MainContent_DropDownCheckBoxList4_checkBoxList_2" class="dropdowncheck"><label for="MainContent_DropDownCheckBoxList4_checkBoxList_2" class="dropdownlabel">Item 1</label></td>
    </tr><tr>
        <td><input type="checkbox" value="2" name="ctl00$MainContent$DropDownCheckBoxList4$checkBoxList$3" id="MainContent_DropDownCheckBoxList4_checkBoxList_3" class="dropdowncheck"><label for="MainContent_DropDownCheckBoxList4_checkBoxList_3" class="dropdownlabel">Item 2</label></td>
    </tr><tr>
        <td><input type="checkbox" value="3" name="ctl00$MainContent$DropDownCheckBoxList4$checkBoxList$4" id="MainContent_DropDownCheckBoxList4_checkBoxList_4" class="dropdowncheck"><label for="MainContent_DropDownCheckBoxList4_checkBoxList_4" class="dropdownlabel">Item 3</label></td>
    </tr>
</tbody></table>

问题是单个标签只是当时文本的宽度，但我希望整行都可以选择。请注意，我的控件/表格具有固定宽度，因此您无需计算长度等。

我看到的所有解决方案都建议使用 display: block 或变体，但这会导致文本出现在复选框下方的行上，即使设置为 90% 宽度也不起作用在所有浏览器上。

如何让标签占据行的剩余部分？ JQuery 答案是可以接受的(甚至更可取，因为控件已经大量使用 JQuery)，但请发布一个解决方案适用于所有浏览器。您可以从 HTML 中看到，我已经通过 JQuery 向复选框添加了一个 dropdowncheck 类，并向标签添加了一个 dropdownlabel 类(如果这有助于给出特定的 CSS 答案)。

简单的解决方案(基于 Henrik 的回答):

.dropdowncheck
{
    float: left;

.dropdownlabel
{
    display: block;
}

只要复选框和标签分配了类(即通过 JQuery)，就可以正常工作。

Answer 1

如何将标签设置为 display:block 并给复选框 float:left ？

如果文本没有按照您的意愿水平对齐，只需在复选框上设置高度并为标签提供相等的行高。