title: display radiobuttonlist inline
body: <p>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).</p>
  
  <p>This is just a normal radiolist:</p>
  
  <pre><code>&lt;asp:RadioButtonList ID="radRace" CssClass="radioButtonList" runat="server" RepeatDirection="Horizontal"&gt;
      &lt;asp:ListItem&gt;Race 1&lt;/asp:ListItem&gt;
      &lt;asp:ListItem&gt;Race 2&lt;/asp:ListItem&gt;
      &lt;asp:ListItem&gt;Race 3&lt;/asp:ListItem&gt;
      &lt;asp:ListItem&gt;Race 4&lt;/asp:ListItem&gt;
  &lt;/asp:RadioButtonList&gt;
  
  ul.radioButtonList { list-style:none; margin: 0; padding: 0;}
  ul.radioButtonList.horizontal li { display: inline;}
  </code></pre>
  
  <p>When the repeatLayout is on table:</p>
  
  <p><img src="https://i.stack.imgur.com/OIWxt.png" alt="enter image description here"></p>
  
  <p>And when the repeatLayout is on Flow:</p>
  
  <p><img src="https://i.stack.imgur.com/DucX8.png" alt="enter image description here"></p>
  
  <p>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....</p>
  
  <hr>
  
  <p>SOLUTION:</p>
  
  <p>This is what the radio buttonlist look like now:</p>
  
  <pre><code>&lt;asp:RadioButtonList ID="radRace" CssClass="radioButtonList" runat="server" RepeatDirection="Horizontal"&gt;
      &lt;asp:ListItem&gt;Race 1&lt;/asp:ListItem&gt;
      &lt;asp:ListItem&gt;Race 2&lt;/asp:ListItem&gt;
      &lt;asp:ListItem&gt;Race 3&lt;/asp:ListItem&gt;
      &lt;asp:ListItem&gt;Race 4&lt;/asp:ListItem&gt;
  &lt;/asp:RadioButtonList&gt;
  </code></pre>
  
  <p>And this is the cssClass:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
      .radioButtonList { list-style:none; margin: 0; padding: 0;}
      .radioButtonList.horizontal li { display: inline;}
  
      .radioButtonList label{
          display:inline;
      }
  &lt;/style&gt;
  </code></pre>