CODEWITHSUNDEEP
asp.nethtmlcss
LCJ
LCJ

Reputation: 22652

Align Checkboxes Horizontally (Table Layout)

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>

Upvotes: 4

Views: 30317

Answers (5)

IrishChieftain
IrishChieftain

Reputation: 15253

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

Upvotes: 6

Alex
Alex

Reputation: 6406

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.

Upvotes: 5

Kapil Khandelwal
Kapil Khandelwal

Reputation: 16144

If you are using ASP.NET Framework 4, you can check following properties:

CheckBoxList.RepeatDirection Property:

Gets or sets a value that indicates whether the control displays vertically or horizontally.

CheckBoxList.RepeatLayout Property (to get rid of table layout)

Gets or sets a value that specifies whether the list will be rendered by using a table element, a ul element, an ol element, or a span element.

Upvotes: 1

aldux
aldux

Reputation: 2804

Either put them in different cells but in one line (tr), or lose the table and use css float.

Upvotes: 0

thecodeparadox
thecodeparadox

Reputation: 87073

#Checkboxlist1 tr {
    float: left; // or diplay: inline-block
    margin-right: 15px;
}

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

DEMO

Upvotes: 2

Related Questions