如何在复选框列表项之间添加间距？

Question

我正在使用的表中有复选框列表。我需要与第二列中的复选框对齐的清单。文本框（第二行）每行的间距为 26px。我找不到如何在复选框列表上的项目之间设置间距。设置边距仅适用于列表外部而不是列表内的项目。

我尝试了单元格间距，但无法完全对齐。

更新 2

<td style="vertical-align: top" rowspan="7"  Width="175" style="padding: 0;">
                <asp:CheckBoxList ID="cbtasklist" runat="server" CssClass="radiobutton">
                    <asp:ListItem Value="Task 1">Task 1</asp:ListItem>
                    <asp:ListItem Value="Task 2">Task 2</asp:ListItem>
                    <asp:ListItem Value="Task 3">Task 3</asp:ListItem>
                    <asp:ListItem>Task 4</asp:ListItem>
                    <asp:ListItem Value="Task 5">Task 5</asp:ListItem>
                    <asp:ListItem Value="Other1">Other</asp:ListItem>
                    <asp:ListItem Value="Other2">Other</asp:ListItem>
                </asp:CheckBoxList>


                    </td>
                <td class="auto-style187" style="vertical-align: top" colspan="2">

                    &nbsp;</td>


.auto-style187 {
        height: 26px;
        width: 357px;
    }

更新 3： 为每一行添加一个复选框是否更容易，以便我可以使用与另一列相同的 CSS？

复选框列表的原因是为了验证必须选择1。

Answer 1

我希望你正在寻找这个

   <form id="form1" runat="server">
<div style="width: 100%">



    <table class="auto-style1">
        <tr>
            <td class="auto-style3">
                <asp:CheckBoxList ID="CheckBoxList1" runat="server" Height="163px">
                    <asp:ListItem>a</asp:ListItem>
                    <asp:ListItem>b</asp:ListItem>
                    <asp:ListItem>c</asp:ListItem>
                    <asp:ListItem>d</asp:ListItem>
                    <asp:ListItem>e</asp:ListItem>
                    <asp:ListItem>f</asp:ListItem>
                </asp:CheckBoxList>
            </td>
            <td class="auto-style8">
                <table class="auto-style1">
                    <tr>
                        <td class="auto-style5">
                            <asp:TextBox ID="TextBox1" runat="server" OnTextChanged="TextBox1_TextChanged"></asp:TextBox>
                        </td>
                        <td>aaaa</td>
                    </tr>
                    <tr>
                        <td class="auto-style6">
                            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                        </td>
                        <td class="auto-style7">aaaa</td>
                    </tr>
                    <tr>
                        <td class="auto-style5">
                            <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
                        </td>
                        <td>aaaa</td>
                    </tr>
                    <tr>
                        <td class="auto-style10">
                            <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
                        </td>
                        <td class="auto-style11">aaaa</td>
                    </tr>
                    <tr>
                        <td class="auto-style12">
                            <asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
                        </td>
                        <td class="auto-style13">aaaa</td>
                    </tr>
                    <tr>
                        <td class="auto-style5">
                            <asp:TextBox ID="TextBox6" runat="server" OnTextChanged="TextBox6_TextChanged"></asp:TextBox>
                        </td>
                        <td>aaaa</td>
                    </tr>
                </table>
            </td>
            <td class="auto-style4"></td>
        </tr>
        <tr>
            <td class="auto-style2">&nbsp;</td>
            <td class="auto-style9">&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td class="auto-style2">&nbsp;</td>
            <td class="auto-style9">&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td class="auto-style14"></td>
            <td class="auto-style15"></td>
            <td class="auto-style11"></td>
        </tr>
        <tr>
            <td class="auto-style2">&nbsp;</td>
            <td class="auto-style9">&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </table>



    </div>

    </form>

看图

我只是在一张桌子里面拿了一张桌子。您可以根据需要删除不需要的列

不要忘记编辑文本框阵容由您决定

Answer 2

你为什么不在你的 CSS 上试试这个：

checkbox { padding-bottom: 10px; }