如何在ASP.NET RadioButtonList中的项之间添加空格

Question

我有一个ASP.NET RadioButtonList,它使用RepeatDirection ="Horizo​​ntal"显示四个项目,以便在一行上显示它们.我正在使用RepeatLayout ="Flow"来避免表的标记.但是,这会导致列表中的项目彼此相邻放置,这看起来不太好.

因此,我尝试使用表格布局来利用CellSpacing和/或CellPadding属性.不幸的是,这些属性会影响表格中的垂直和水平间距/填充,所以当我得到水平间距时,我也会得到不希望的垂直间距.

在这一点上,我是这样的:

<asp:RadioButtonList ID="rblMyRadioButtonList" runat="server" 
    RepeatDirection="Horizontal"
    RepeatLayout="Flow" >
    <asp:ListItem Selected="false" Text="Item One&nbsp;&nbsp;&nbsp;&nbsp;" Value="Item_1" />
    <asp:ListItem Selected="false" Text="Item Two&nbsp;&nbsp;&nbsp;&nbsp;" Value="Item_2" />
    <asp:ListItem Selected="false" Text="Item Three&nbsp;&nbsp;&nbsp;&nbsp;" Value="Item_3" />
    <asp:ListItem Selected="false" Text="Item Four&nbsp;&nbsp;&nbsp;&nbsp;" Value="Item_4" />
</asp:RadioButtonList>

......对我尖叫"你做得不对劲!"

完成此任务的正确方法是什么？

Answer 1

我知道这是一个老问题,但我这样做:

<asp:RadioButtonList runat="server" ID="myrbl" RepeatDirection="Horizontal" CssClass="rbl"> 

将此作为您的班级:

.rbl input[type="radio"]
{
   margin-left: 10px;
   margin-right: 1px;
}

Answer 2

更容易......

ASP.NET

<asp:RadioButtonList runat="server" ID="MyRadioButtonList" RepeatDirection="Horizontal" CssClass="FormatRadioButtonList"> ...

CSS

.FormatRadioButtonList label
{
  margin-right: 15px;
}

Answer 3

使用css为这些特定元素添加右边距.通常我会构建控件,然后运行它来查看生成的html结构是什么样的,然后让css改变那些元素.

您最好通过设置课程来完成此操作.将CssClass="myrblclass"属性添加到列表声明中.

您还可以以编程方式向项添加属性,这将在另一方面出现.

rblMyRadioButtonList.Items[x].Attributes.CssStyle.Add("margin-right:5px;")

这可能对您更好,因为您可以为除最后一个之外的所有属性添加该属性.

Answer 4

如果重复布局是表,您还可以使用cellspacing和cellpadding属性.

    <asp:RadioButtonList ID="rblMyRadioButtonList" runat="server" CellPadding="3" CellSpacing="2">