display radiobuttonlist inline

Question

I've got a few radiolists on my page. The problem that I am facing is that the text of the radio buttons are not displayed inline of the radion button. I have put the repeatLayout to Table and Flow and neither is working. I have tried to add a style of display:inline; but that doesn't work either (though it did on the checkboxes and I thought that maybe it would work here too).

This is just a normal radiolist:

<asp:RadioButtonList ID="radRace" CssClass="radioButtonList" runat="server" RepeatDirection="Horizontal">
    <asp:ListItem>Race 1</asp:ListItem>
    <asp:ListItem>Race 2</asp:ListItem>
    <asp:ListItem>Race 3</asp:ListItem>
    <asp:ListItem>Race 4</asp:ListItem>
</asp:RadioButtonList>

ul.radioButtonList { list-style:none; margin: 0; padding: 0;}
ul.radioButtonList.horizontal li { display: inline;}

When the repeatLayout is on table:

And when the repeatLayout is on Flow:

Can Somebody please help me on how to set it so the text is displayed next to the radio button... If it makes a difference the radioButtonList is in a table....

---

SOLUTION:

This is what the radio buttonlist look like now:

<asp:RadioButtonList ID="radRace" CssClass="radioButtonList" runat="server" RepeatDirection="Horizontal">
    <asp:ListItem>Race 1</asp:ListItem>
    <asp:ListItem>Race 2</asp:ListItem>
    <asp:ListItem>Race 3</asp:ListItem>
    <asp:ListItem>Race 4</asp:ListItem>
</asp:RadioButtonList>

And this is the cssClass:

<style type="text/css">
    .radioButtonList { list-style:none; margin: 0; padding: 0;}
    .radioButtonList.horizontal li { display: inline;}

    .radioButtonList label{
        display:inline;
    }
</style>

Answer 1

Check the solution suggested by Aroon Soraali:

<asp:RadioButtonList RepeatDirection="Horizontal" ID="rblFilterType" runat="server"/>