如何在checkboxlist项之间添加间距?

时间:2016-09-20 14:52:30

标签: c# css asp.net checkboxlist

我在我正在使用的表格中有复选框列表。清单我需要与第二列中的复选框对齐。文本框(第二行)的每一行的间距是26px。我找不到如何在复选框列表上的项目间隔。设置边距只会使列表外部不是项目。

enter image description here

enter image description here

我尝试过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。

2 个答案:

答案 0 :(得分:0)

我希望你正在寻找这个

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

查看图片

updated one

我只是把桌子放在桌子里。你可以根据需要删除不需要的栏目

不要忘记编辑文本框阵容,直至你

答案 1 :(得分:0)

为什么不在CSS上尝试这个:

checkbox { padding-bottom: 10px; }