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

Question

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:

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

Answer 1

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

<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

.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

<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

Just add some CSS for it:

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

Answer 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).

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

Answer 4

Just add some CSS for it

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