-1

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

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

默认情况下，为 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 中看到，我已经通过 JQuerydropdowncheck在复选框中添加了一个类，并dropdownlabel在标签中添加了一个类（如果这有助于给出特定的 CSS 答案）。

简单的解决方案（基于 Henrik 的回答）：

.dropdowncheck
{
    float: left;

.dropdownlabel
{
    display: block;
}

只要复选框和标签具有分配的类（即通过 JQuery），就可以正常工作。

4

2 回答 2

2

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

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

于 2012-07-08T12:16:15.523 回答
1

即使通过纯 jQuery，您也可以获得您正在寻找的结果。受此启发，我做了 这个例子。我不得不删除标签标签，因为在这种方法之后它们的功能被弃用了。

$('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;
}​
于 2012-07-08T12:56:32.980 回答