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

Having spent some time googling the issue and trying a few things I can't seem to find a solution for this. I have a RadioButtonList control that looks like:

花了一些时间在google上搜索这个问题并尝试了一些事情，我似乎找不到解决这个问题的办法。我有一个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>

Now when I look at it in a browser both the buttons are really close together. Is there any way for me to space them out? I tried margin-left css but that didn't sort it. Any suggestions would be awesome. Thanks.

当我在浏览器中看到它的时候，两个按钮都非常接近。我有办法把它们分开吗?我尝试了左页css，但是没有排序。任何建议都很棒。谢谢。

4 个解决方案

#1

You can do it in many ways. For instance you can set the CssClass property of RadioButtonList control. Look below.

你可以用很多方法。例如，您可以设置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>

Then in your css declarations you can define the spaced class like this

然后在css声明中，可以像这样定义间隔类

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

Or if you wish to use different spacing for list items you can do it by specifying it with style attribute for each listitem this way

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

#2

Just add some CSS for it:

只需添加一些CSS:

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

#3

How did you assign the CSS to that list? The reason I ask is because if you tried to assign the CSS to the list by referencing the ID "rblCheck" that won't work (.NET will change the ID and append some numbers to the value).

你是如何分配CSS到那个列表的?我这样问的原因是，如果您试图通过引用ID“rblCheck”将CSS分配到列表中，那将不起作用(。NET将更改ID并向值添加一些数字)。

Try adding the CSS inline or giving the list a class to assign the CSS to.

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

#4

Just add some CSS for it

只要添加一些CSS就可以了

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

#1