水平对齐复选框(表格布局)

Question

我有http://jsfiddle.net/Lijo/Fw3fz/中显示的复选框.我需要水平对齐复选框.如何使用CSS对齐它们？

注意:以下HTML代码是从ASP.NET生成的.我无法更改此HTML代码.

<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

创建一个CheckBoxList并设置水平布局属性:

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

更多信息:

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

Answer 2

你必须改变trs display属性:http://jsfiddle.net/Fw3fz/4/

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

或者,使用float:http://jsfiddle.net/Fw3fz/10/

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

如果您需要在复选框和标签之间留出一些空格,请添加以下代码段:

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

但是,在内联显示表行或浮动它们的情况并不常见.如果可能,请更改HTML结构.