How to add space in-between the list items of a RadioButtonList asp.net Control?

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

Just add some CSS for it

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