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

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>

现在当我在浏览器中查看时，这两个按钮非常靠近。有没有办法让它们分开一点？我尝试使用margin-left的css属性，但并没有解决问题。任何建议都将不胜感激。谢谢。

- user3809554

---

我们需要查看附加到输出HTML的CSS。 - Paulie_D

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 */
}

如果您希望对列表项使用不同的间距，可以通过为每个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>

- rasso

---

我喜欢第二种方法。更加灵活。非常感谢。 - user3809554

Answer 2

只需为其添加一些CSS即可：

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

- Pavel Morshenyuk

Answer 3

只需为其添加一些CSS。

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

- Shridhar

Answer 4

你是如何将CSS分配给那个列表的？我问这个问题是因为如果你尝试通过引用ID“rblCheck”来将CSS分配给列表，那么这样做是行不通的（.NET会更改ID并附加一些数字到值）。

尝试添加内联CSS或给列表分配一个类来分配CSS。

- Joe Hinton