将 CheckBoxList 标签的宽度设置为全宽（以允许行选择）

Question

这似乎是一个直截了当的问题，但我在这里（或通过 Google）找不到具体答案。

我有一个 APS.Net CheckBoxList 在覆盖的 div 内（模拟下拉选择列表）。

默认情况下，为 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 ？

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

Answer 2

您甚至可以通过纯 jQuery 获得您正在寻找的结果。灵感来自this 我做了 this example。我不得不删除标签标签，因为在这种方法之后它们的功能被弃用了。

$('td').click(function(event){

if (event.target.type !== 'checkbox') {
  $(':checkbox', this).trigger('click');

}

})​

用一些 CSS 来增加趣味

td{
width: 200px;
background: orange;
border-bottom: 1px solid black;
cursor: pointer;
}​