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，但没有对它进行排序。任何建议都会很棒。谢谢。

Answer 1

你可以通过多种方式实现这一目标。例如，您可以设置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类

.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＆＃34; rblCheck＆＃34;将CSS分配给列表。它不会起作用（.NET将更改ID并在值中附加一些数字）。

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

Answer 4

只需添加一些CSS

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

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

4 个答案: