Align Checkboxes Horizontally (Table Layout)

Question

I have checkboxes as shown in http://jsfiddle.net/Lijo/Fw3fz/. I need to align the checkboxes horizontally. How to align them using CSS?

Note: The following HTML code is generated from ASP.NET. I cannot change this HTML code.

<table id="Checkboxlist1">
<tr>
    <td><input id="Checkboxlist1_0" type="checkbox" name="Checkboxlist1$0" value="red" /><label for="Checkboxlist1_0">Red</label></td>
</tr><tr>
    <td><input id="Checkboxlist1_1" type="checkbox" name="Checkboxlist1$1" value="blue" /><label for="Checkboxlist1_1">Blue</label></td>
</tr><tr>
    <td><input id="Checkboxlist1_2" type="checkbox" name="Checkboxlist1$2" value="green" /><label for="Checkboxlist1_2">Green</label></td>
</tr>
</table>

Answer 1

Create a CheckBoxList and set the horizontal layout property:

<asp:CheckBoxList ID="cbl" runat="server" RepeatDirection="Horizontal">
    <asp:ListItem>Red</asp:ListItem>
    <asp:ListItem >Blue</asp:ListItem>
    <asp:ListItem>Green</asp:ListItem>
</asp:CheckBoxList>

More info:

http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.checkboxlist.repeatdirection.aspx

Answer 2

You have to change the trs display property: http://jsfiddle.net/Fw3fz/4/

​#Checkboxlist1 tr{
    display:inline-block;
    margin-right:20px;
}​

Or, use float: http://jsfiddle.net/Fw3fz/10/

#Checkboxlist1 tr{
    float:left;
    margin-right:20px;
}​

If you want some space between the checkboxes and the labels, add this snippet:

#Checkboxlist1 tr label{
    margin-left:5px;
}

However, it's very uncommon to display table rows inline or to float them. If possible, change the HTML structure.