Html 水平对齐复选框（表格布局）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10821533/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Align Checkboxes Horizontally (Table Layout)
提问by LCJ
I have checkboxes as shown in http://jsfiddle.net/Lijo/Fw3fz/. I need to align the checkboxes horizontally. How to align them using CSS?
我有http://jsfiddle.net/Lijo/Fw3fz/ 中所示的复选框。我需要水平对齐复选框。如何使用 CSS 对齐它们？
Note: The following HTML code is generated from ASP.NET. I cannot change this HTML code.
注意：以下 HTML 代码是从 ASP.NET 生成的。我无法更改此 HTML 代码。
<table id="Checkboxlist1">
<tr>
<td><input id="Checkboxlist1_0" type="checkbox" name="Checkboxlist1<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>
" value="red" /><label for="Checkboxlist1_0">Red</label></td>
</tr><tr>
<td><input id="Checkboxlist1_1" type="checkbox" name="Checkboxlist1" value="blue" /><label for="Checkboxlist1_1">Blue</label></td>
</tr><tr>
<td><input id="Checkboxlist1_2" type="checkbox" name="Checkboxlist1" value="green" /><label for="Checkboxlist1_2">Green</label></td>
</tr>
</table>
回答by IrishChieftain
Create a CheckBoxList and set the horizontal layout property:
创建一个 CheckBoxList 并设置水平布局属性：
?#Checkboxlist1 tr{
display:inline-block;
margin-right:20px;
}?
More info:
更多信息：
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.checkboxlist.repeatdirection.aspx
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.checkboxlist.repeatdirection.aspx
回答by Alex
You have to change the trs displayproperty: http://jsfiddle.net/Fw3fz/4/
您必须更改trsdisplay属性：http: //jsfiddle.net/Fw3fz/4/
#Checkboxlist1 tr{
float:left;
margin-right:20px;
}?
Or, use float: http://jsfiddle.net/Fw3fz/10/
或者，使用float：http: //jsfiddle.net/Fw3fz/10/
#Checkboxlist1 tr label{
margin-left:5px;
}
If you want some space between the checkboxes and the labels, add this snippet:
如果您想在复选框和标签之间留出一些空间，请添加以下代码段：
#Checkboxlist1 tr {
float: left; // or diplay: inline-block
margin-right: 15px;
}
#Checkboxlist1 td label {
margin-left: 5px;
}
However, it's very uncommon to display table rows inline or to float them. If possible, change the HTML structure.
但是，内联显示表格行或浮动它们是非常罕见的。如果可能，请更改 HTML 结构。
回答by Kapil Khandelwal
If you are using ASP.NET Framework 4, you can check following properties:
如果您使用的是 ASP.NET Framework 4，则可以检查以下属性：
CheckBoxList.RepeatDirection Property:
CheckBoxList.RepeatDirection 属性：
Gets or sets a value that indicates whether the control displays vertically or horizontally.
获取或设置一个值，该值指示控件是垂直显示还是水平显示。
CheckBoxList.RepeatLayout Property (to get rid of table layout)
CheckBoxList.RepeatLayout 属性（摆脱表格布局）
Gets or sets a value that specifies whether the list will be rendered by using a table element, a ul element, an ol element, or a span element.
获取或设置一个值，该值指定是使用 table 元素、ul 元素、ol 元素还是 span 元素呈现列表。
回答by aldux
Either put them in different cells but in one line (tr), or lose the table and use css float.
要么将它们放在不同的单元格中但在一行（tr）中，要么丢失表格并使用css float。
