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.

Territoriality

We'd need to see the CSS attaching to the output HTML – Lowrance

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>

Vainglory

I like the second way of doing it. More flexible. Many thanks. – Territoriality

Answer 2

Just add some CSS for it:

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

Workingman

Answer 3

Just add some CSS for it

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

Staford

Answer 4

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.

Jiffy