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. ```

Red

Blue

Green

```

Accepted Answer

You have to change the `tr`s `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.

Align Checkboxes Horizontally (Table Layout)

Solution

Problem