复选框列表的 CSS 分组在 asp.net 中的复选框下

Question

是否可以显示复选框列表分组，如下图所示？ 我正在使用 asp.net 控件并绑定数据。但我需要制作相同的风格。我如何使用 CSS 来做到这一点？

  <asp:DataList ID="dl_Groups_1" RepeatColumns="1"  runat="server" OnItemDataBound="dl_Groups_1_ItemDataBound" RepeatDirection="vertical" ShowFooter="False" ShowHeader="False">
        <ItemTemplate>
            <asp:CheckBox Font-Bold="true" runat="server" ID="chk_Group_1" Text='<%# Eval("category_type") %>' Value='<%# Eval("service_type_category_id") %>' onclick="OnGroupClick" />
            <asp:CheckBoxList runat="server" ID="chkServiceType_1" Style="padding-left: 20px" DataValueField="ServiceTypeID" DataTextField="Name" EnableViewState="true">
            </asp:CheckBoxList>
            <br />
        </ItemTemplate>
    </asp:DataList>

在浏览器中呈现的 HTML：

<table cellspacing="0" border="0" style="border-collapse:collapse;" id="ctl00_cphMain_ctlEsnSearchByServices_dl_Groups_1">
    <tbody>

    <tr>
        <td>
            <span style="font-weight:bold;"><input type="checkbox" onclick="selectGroupAll(ctl00_cphMain_ctlEsnSearchByServices_dl_Groups_1_ctl00_chk_Group_1);" name="ctl00$cphMain$ctlEsnSearchByServices$dl_Groups_1$ctl00$chk_Group_1" id="ctl00_cphMain_ctlEsnSearchByServices_dl_Groups_1_ctl00_chk_Group_1"><label for="ctl00_cphMain_ctlEsnSearchByServices_dl_Groups_1_ctl00_chk_Group_1">Stay-In Facilities</label></span>
            <table border="0" style="padding-left: 20px" id="ctl00_cphMain_ctlEsnSearchByServices_dl_Groups_1_ctl00_chkServiceType_1">
            <tbody>
            <tr>
                <td><input type="checkbox" name="ctl00$cphMain$ctlEsnSearchByServices$dl_Groups_1$ctl00$chkServiceType_1$0" id="ctl00_cphMain_ctlEsnSearchByServices_dl_Groups_1_ctl00_chkServiceType_1_0"><label for="ctl00_cphMain_ctlEsnSearchByServices_dl_Groups_1_ctl00_chkServiceType_1_0">DEF</label></td>
            </tr><tr>
                <td><input type="checkbox" name="ctl00$cphMain$ctlEsnSearchByServices$dl_Groups_1$ctl00$chkServiceType_1$1" id="ctl00_cphMain_ctlEsnSearchByServices_dl_Groups_1_ctl00_chkServiceType_1_1"><label for="ctl00_cphMain_ctlEsnSearchByServices_dl_Groups_1_ctl00_chkServiceType_1_1">ABC </label></td>
            </tr><tr>
                <td><input type="checkbox" name="ctl00$cphMain$ctlEsnSearchByServices$dl_Groups_1$ctl00$chkServiceType_1$2" id="ctl00_cphMain_ctlEsnSearchByServices_dl_Groups_1_ctl00_chkServiceType_1_2"><label for="ctl00_cphMain_ctlEsnSearchByServices_dl_Groups_1_ctl00_chkServiceType_1_2">XYZ</label></td>
            </tr>
            </tbody>
            </table>
            <br>
        </td>
    </tr>

    <tr>
        <td>
            <span style="font-weight:bold;"><input type="checkbox" onclick="selectGroupAll(ctl00_cphMain_ctlEsnSearchByServices_dl_Groups_1_ctl01_chk_Group_1);" name="ctl00$cphMain$ctlEsnSearchByServices$dl_Groups_1$ctl01$chk_Group_1" id="ctl00_cphMain_ctlEsnSearchByServices_dl_Groups_1_ctl01_chk_Group_1"><label for="ctl00_cphMain_ctlEsnSearchByServices_dl_Groups_1_ctl01_chk_Group_1">Other Services</label></span>
            <table border="0" style="padding-left: 20px" id="ctl00_cphMain_ctlEsnSearchByServices_dl_Groups_1_ctl01_chkServiceType_1">
            <tbody>
            <tr>
                <td><input type="checkbox" name="ctl00$cphMain$ctlEsnSearchByServices$dl_Groups_1$ctl01$chkServiceType_1$0" id="ctl00_cphMain_ctlEsnSearchByServices_dl_Groups_1_ctl01_chkServiceType_1_0"><label for="ctl00_cphMain_ctlEsnSearchByServices_dl_Groups_1_ctl01_chkServiceType_1_0">GHJ</label></td>
            </tr><tr>
                <td><input type="checkbox" name="ctl00$cphMain$ctlEsnSearchByServices$dl_Groups_1$ctl01$chkServiceType_1$1" id="ctl00_cphMain_ctlEsnSearchByServices_dl_Groups_1_ctl01_chkServiceType_1_1"><label for="ctl00_cphMain_ctlEsnSearchByServices_dl_Groups_1_ctl01_chkServiceType_1_1">IJK</label></td>
            </tr><tr>
                <td><input type="checkbox" name="ctl00$cphMain$ctlEsnSearchByServices$dl_Groups_1$ctl01$chkServiceType_1$2" id="ctl00_cphMain_ctlEsnSearchByServices_dl_Groups_1_ctl01_chkServiceType_1_2"><label for="ctl00_cphMain_ctlEsnSearchByServices_dl_Groups_1_ctl01_chkServiceType_1_2">MNO</label></td>
            </tr>
            </tbody>
            </table>
            <br>
        </td>
    </tr>

</tbody>
</table>

Answer 1

好的，所以我设法做点什么。它看起来像这样：

DEMO

<section>
    <input type="checkbox" id="one" />
    <label for="one">Check One</label>
    <ul class="subCheck">
        <li>
            <input type="checkbox" id="subOne" />
            <lable for="subOne">subTwo</lable>
        </li>
        <li>
            <input type="checkbox" id="subTwo" />
            <lable for="subTwo">subTwo</lable>
        </li>
        <li>
            <input type="checkbox" id="subThree" />
            <lable for="subThree">subTwo</lable>
        </li>

    </ul>
</section>

还有 CSS：

section{
    float: left;
    position: relative;
    width: 100%; }

section:before{
    background: #000;
    content: "";
    height: 81px;
    left: 8px;
    position: absolute;
    top: 3px;
    width: 1px;
    z-index: 1; }

input[type="checkbox"]{
    float: left;
    margin: 2px;
    width: auto; }

label{
    float; left;
    margin: 0 0 0 5px;
    width: auto; }

ul{
    clear: both;
    float: left;
    list-style: none;
    margin: 5px 0 0;
    padding: 0 0 0 20px;
    width: 100%; }

ul li{
    float: left;
    margin: 0 0 5px;
    position: relative;
    width: 100%; }

li:before{
    background: #000;
    content: "";
    height: 1px;
    left: -11px;
    position: absolute;
    top: 8px;
    width: 14px; }

input, label, ul{
    position: relative;
    z-index: 2; }

HTML 仅供参考，我认为 CSS 正是您所寻找的。玩得开心。