asp.net - 水平对齐复选框（表格布局）

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

您必须更改trsdisplay属性：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 结构。

Answer 3

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

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

演示

Answer 4

如果您使用的是 ASP.NET Framework 4，则可以检查以下属性：

CheckBoxList.RepeatDirection 属性：

获取或设置一个值，该值指示控件是垂直显示还是水平显示。

CheckBoxList.RepeatLayout 属性（摆脱表格布局）

获取或设置一个值，该值指定是否将使用 table 元素、ul 元素、ol 元素或 span 元素呈现列表。

Answer 5

要么将它们放在不同的单元格中但在一行（tr）中，要么丢失表格并使用css float。