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>

IrishChieftain · Accepted Answer · 2012-05-30 17:57:47Z

6

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

edited May 30, 2012 at 17:57

answered May 30, 2012 at 17:49

IrishChieftain

15.2k8 gold badges55 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alex · Accepted Answer · 2012-05-30 17:56:05Z

5

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.

edited May 30, 2012 at 17:56

answered May 30, 2012 at 17:49

Alex

6,4362 gold badges22 silver badges26 bronze badges

1 Comment

LCJ Over a year ago

Thanks. Can we provide some spacing between each item? How to do that using CSS?

thecodeparadox · Accepted Answer · 2012-05-30 17:51:39Z

2

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

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

DEMO

answered May 30, 2012 at 17:51

thecodeparadox

87.2k22 gold badges143 silver badges164 bronze badges

Comments

Kapil Khandelwal · Accepted Answer · 2012-05-30 17:55:06Z

1

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.

answered May 30, 2012 at 17:55

Kapil Khandelwal

16.2k3 gold badges49 silver badges55 bronze badges

Comments

aldux · Accepted Answer · 2012-05-30 17:51:49Z

0

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

answered May 30, 2012 at 17:51

aldux

2,8042 gold badges26 silver badges36 bronze badges

Collectives™ on Stack Overflow

Align Checkboxes Horizontally (Table Layout)

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related