Question

我有一个asp.net复选框列表如下：

    <asp:CheckBoxList ID="CheckBoxList_Genres" runat="server" RepeatColumns="3">
        <asp:ListItem Selected="True">Action</asp:ListItem>
        <asp:ListItem Selected="True">Comedy</asp:ListItem>
        <asp:ListItem Selected="True">Classics</asp:ListItem>
        <asp:ListItem Selected="True">Documentary</asp:ListItem>

[...]

我有两个问题：文本没有与每个复选框对齐，在某些浏览器（特别是Safari）中，复选框和文本之间没有填充（文本与复选框相对应）。我知道这里发布的答案： How to align checkboxes and their labels consistently cross-browsers

但是，我无法弄清楚如何在asp：checkboxlist上下文中实现这些样式;我知道可以为checkboxlist设置css样式，但不要认为这允许我为“label”和“checkbox”设置单独的样式。帮助将不胜感激。

Answer 1

您应该可以将相同的方法应用于CheckBoxList控件的CssClass属性，就像使用常规复选框一样。

这是我用来缩进ASP.net复选框列表旁边的长文本的一些CSS代码：

.chkChoice input 
{ 
    margin-left: -20px; 
}
.chkChoice td 
{ 
    padding-left: 20px; 
}

ASP.net：

<asp:CheckBoxList id="ChkWork" runat="server" TabIndex="2" CssClass="chkChoice">

Answer 2

在复选框列表的属性中，将repeatlayout从flow切换到table。这将使列对齐。

Answer 3

一些checkboxlist项目，有标签，用于文本和项目之间的空格，例如复选框，你必须在Css中给出项目类型。

Exlampel：

.myCheckBoxList label 
{  
    padding-right: 5px; 
}

并给出che checkboxlist类，如下所示：

 CssClass="myCheckBoxList"

Answer 4

asp：CheckBoxList的属性之一是RepeatLayout =“ Table”。这将导致一个表格形式的列表，其中所有复选框都对齐。

<asp:CheckBoxList ID="CheckBoxList1" runat="server" RepeatColumns="5" RepeatDirection="Horizontal" RepeatLayout="Table" Width="100%">

Output:

asp：CheckBoxList的对齐和填充

4 个答案: