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

您必须更改tr s 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结构。

Answer 3

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

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

<强> DEMO

Answer 4

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

CheckBoxList.RepeatDirection属性：

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

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

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

Answer 5

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

水平对齐复选框（表格布局）

5 个答案: