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

Question

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

我尝试了 cellspacing，但无法完全对齐。

更新 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>

看图

我刚刚将 table 放入 table 中。您可以根据需要删除不需要的列

不要忘记编辑文本框排列，由您决定

Answer 2

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

checkbox { padding-bottom: 10px; }

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

How to add spacing between checkboxlist items?

css

c#

asp.net

checkboxlist