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

【问题标题】：Align Checkboxes Horizontally (Table Layout)水平对齐复选框（表格布局）
【发布时间】：2012-06-04 23:57:06
【问题描述】：

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

【问题讨论】：

标签： asp.net html css

【解决方案1】：

您必须更改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;
}

如果你想在复选框和标签之间留一些空间，添加这个 sn-p:

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

但是，内联显示表格行或浮动它们是非常罕见的。如果可能，请更改 HTML 结构。

【讨论】：

谢谢。我们可以在每个项目之间提供一些间距吗？如何使用 CSS 做到这一点？

【解决方案2】：

创建一个 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>

【讨论】：

【解决方案3】：

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

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

DEMO

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

CheckBoxList.RepeatDirection 属性：

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

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

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

【讨论】：