如何在 RadioButtonList asp.net 控件的列表项之间添加 space？

Question

花了一些时间在谷歌上搜索这个问题并尝试了一些我似乎无法找到解决方案的方法。我有一个 RadioButtonList 控件，如下所示：

<asp:RadioButtonList ID="rblCheck" runat="server" RepeatDirection="horizontal">
<asp:ListItem Value="red">Red</asp:ListItem>
<asp:ListItem Value="green">Green</asp:ListItem>
</asp:RadioButtonList>

现在，当我在浏览器中查看时，两个按钮非常靠近。有什么办法可以让我space出来吗？我尝试了 margin-left css 但没有对它进行排序。任何建议都会很棒。谢谢。

Answer 1

您是如何将 CSS 分配给该列表的？我问的原因是因为如果您尝试通过引用 ID "rblCheck" 将 CSS 分配给列表，那将不起作用（.NET 将更改 ID 并将一些数字附加到值）。

尝试添加 CSS 内联或给列表一个 class 以将 CSS 分配给。

Answer 2

只需添加一些 CSS 即可：

input[type="radio"] {
 margin: 10px 10px;
}

Answer 3

您可以通过多种方式做到这一点。例如，您可以设置 CssClass 属性或 RadioButtonList 控件。往下看

<asp:RadioButtonList ID="rblCheck" runat="server" RepeatDirection="horizontal" CssClass="spaced">
<asp:ListItem Value="red">Red</asp:ListItem>
<asp:ListItem Value="green">Green</asp:ListItem>
</asp:RadioButtonList>

然后在你的 css 声明中你可以这样定义 spaced class

.spaced input[type="radio"]
{
   margin-right: 50px; /* Or any other value */
}

或者，如果您希望为列表项使用不同的间距，您可以通过为每个 listitem 指定 style 属性来做到这一点

<asp:RadioButtonList ID="rblCheck" runat="server" RepeatDirection="horizontal">
<asp:ListItem Value="red" style="margin-right:20px">Red</asp:ListItem>
<asp:ListItem Value="green" style="margin-right:30px">Green</asp:ListItem>
</asp:RadioButtonList>

Answer 4

只需添加一些 CSS 即可

input[type=radio] {
    margin-left: 8px;
}

如何在 RadioButtonList asp.net 控件的列表项之间添加 space？

How to add space in-between the list items of a RadioButtonList asp.net Control?

css

c#

asp.net

radiobuttonlist