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

I've got an ASP.NET RadioButtonList that displays four items using RepeatDirection="Horizontal" to display them on a single line. I'm using RepeatLayout="Flow" to avoid the markup for a table. However, this causes the items in the list to be placed right next to each other, which does not look good.

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

So, I tried the table layout to take advantage of the CellSpacing and/or CellPadding properties. Unfortunately, these properties affect both the vertical and horizontal spacing/padding within the table, so while I get the horizontal spacing, I also get undesired vertical spacing.

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

At this point, I'm down to this:

在这一点上，我是这样的：

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

...which screams at me "You're not doing it right!"

......对我尖叫着“你做得不对劲！”

What is the right way to accomplish this?

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

5 个解决方案

#1

Use css to add a right margin to those particular elements. Generally I would build the control, then run it to see what the resulting html structure is like, then make the css alter just those elements.

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

Preferably you do this by setting the class. Add the CssClass="myrblclass" attribute to your list declaration.

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

You can also add attributes to the items programmatically, which will come out the other side.

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

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

This may be better for you since you can add that attribute for all but the last one.

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

#2

I know this is an old question but I did it like:

我知道这是一个老问题，但我这样做：

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

Use this as your class:

将此作为您的班级：

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

#3

Even easier...

更容易......

ASP.NET

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

CSS

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

#4

you can also use cellspacing and cellpadding properties if repeat layout is table.

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

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

#5

<asp:RadioButtonList ID="rbn" runat="server" RepeatLayout="Table" RepeatColumns="2"
                        Width="100%" >
                        <asp:ListItem Text="1"></asp:ListItem>
                        <asp:ListItem Text="2"></asp:ListItem>
                        <asp:ListItem Text="3"></asp:ListItem>
                        <asp:ListItem Text="4"></asp:ListItem>
                    </asp:RadioButtonList>

#1