asp:CheckBoxList 的对齐和填充

Posted 2023-03-05

【中文标题】asp:CheckBoxList 的对齐和填充

【英文标题】：Alignment and padding for asp:CheckBoxList

【发布时间】：2010-12-13 11:27:55

【问题描述】：

我有一个 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 上下文中实现这些样式；我知道可以为复选框列表设置 css 样式，但不要认为这允许我为“标签”和“复选框”设置单独的样式。帮助将不胜感激。

【参考方案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">

【参考方案2】：

在复选框列表的属性中，将重复布局从流切换到表格。这将对齐列。

【讨论】：

另外，请确保拉伸 cbl 的宽度，直到 3 列对齐。

【参考方案3】：

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

示例：

.myCheckBoxList label 
  
    padding-right: 5px; 

并像这样给 che checkboxlist 类：

 CssClass="myCheckBoxList" 

【讨论】：

这似乎是原始答案的副本。

【参考方案4】：

asp:CheckBoxList 的属性之一是RepeatLayout="Table"。这将产生一个类似表格的列表，其中所有复选框都对齐。

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

Output: