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

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>

现在，当我在浏览器中查看它们时，两个按钮实际上并在一起。 我有什么办法可以将它们隔开吗？ 我尝试了左边距css，但是没有排序。 任何建议都很棒。 谢谢。

Answer 1

您可以通过多种方式进行操作。 例如，您可以设置RadioButtonList控件的CssClass属性。 往下看。

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

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

或者，如果你想使用不同的间距列表项，你可以通过指定它做到这一点style属性，每个listitem这样

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

只需为其添加一些CSS：

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

Answer 3

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

尝试添加内联CSS或为列表提供将CSS分配给的类。

Answer 4

只需为其添加一些CSS

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