How do I add space between items in an ASP.NET RadioButtonList

Question

I've got an ASP.NET RadioButtonList that displays four items using RepeatDirection="Horizontal" to display them on a single line. I'm using RepeatLayout="Flow" to avoid the markup for a table. However, this causes the items in the list to be placed right next to each other, which does not look good.

So, I tried the table layout to take advantage of the CellSpacing and/or CellPadding properties. Unfortunately, these properties affect both the vertical and horizontal spacing/padding within the table, so while I get the horizontal spacing, I also get undesired vertical spacing.

At this point, I'm down to this:

<asp:RadioButtonList ID="rblMyRadioButtonList" runat="server"      RepeatDirection="Horizontal"     RepeatLayout="Flow" >     <asp:ListItem Selected="false" Text="Item One&nbsp;&nbsp;&nbsp;&nbsp;" Value="Item_1" />     <asp:ListItem Selected="false" Text="Item Two&nbsp;&nbsp;&nbsp;&nbsp;" Value="Item_2" />     <asp:ListItem Selected="false" Text="Item Three&nbsp;&nbsp;&nbsp;&nbsp;" Value="Item_3" />     <asp:ListItem Selected="false" Text="Item Four&nbsp;&nbsp;&nbsp;&nbsp;" Value="Item_4" /> </asp:RadioButtonList> 

...which screams at me "You're not doing it right!"

What is the right way to accomplish this?

Answer 1

I know this is an old question but I did it like:

<asp:RadioButtonList runat="server" ID="myrbl" RepeatDirection="Horizontal" CssClass="rbl">  

Use this as your class:

.rbl input[type="radio"] {    margin-left: 10px;    margin-right: 1px; }