Html CheckboxList 显示对齐？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2723077/
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
CheckboxList to display aligned?
提问by Earlz
I made a CheckboxList and it will not line up. I don't see any way to control the generated HTML. Right now, the check boxes do not align due to the widths of the <td>of each checkbox label being an automatic width. How can I set the width of this and make all the labels and checkboxes appear in two vertical aligned columns?
我做了一个 CheckboxList，它不会排队。我看不到任何控制生成的 HTML 的方法。现在，由于<td>每个复选框标签的宽度是自动宽度，复选框不会对齐。如何设置它的宽度并使所有标签和复选框出现在两个垂直对齐的列中？
My code is simple:
我的代码很简单：
<div style="text-align: center;">
<p>
Here you will tell..
</p>
<asp:CheckBoxList runat="server" ID="cbl" Width="300px"></asp:CheckBoxList>
<br />
<input type="button" id="next_3" value="Next Page" />
</div>
And here is a screen shot
这是一个屏幕截图
回答by CAbbott
You can have it contained within another <div>that does left-aligning like so:
您可以将它包含在另一个<div>左对齐中，如下所示：
<div style="text-align: center;">
<p>Here you will tell..</p>
<div style="text-align: left; width: 50%; margin: auto;">
<asp:CheckBoxList runat="server" ID="cbl" Width="300px"></asp:CheckBoxList>
</div>
<input type="button" id="next_3" value="Next Page" />
</div>
回答by Discorde
Just add the following to your checkboxlist
只需将以下内容添加到您的复选框列表中
Style="text-align='left'";
样式="文本对齐='左'";
<asp:CheckBoxList ID="CheckBoxList1" runat="server" TextAlign="Right" Style="text-align='left';"
RepeatColumns="10" RepeatDirection="Vertical" CellSpacing="20">
回答by Rama Subba Reddy M
Without using DIV and other elements and fixed sizes. We can "align checkboxlist text by Setting "float:left" to the checkbox list input type in Css
不使用 DIV 和其他元素和固定大小。我们可以通过将“ float:left”设置为 Css 中的复选框列表输入类型来“对齐复选框列表文本”
Please check the following example code:
========================================
.CheckboxList
{
font-size:14px;
color:#333333;
}
.CheckboxList input
{
float:left;
clear:both;
}
.Aspx Code:
===========
<asp:CheckBoxList runat="server" ID="chlCities" RepeatColumns="2" CssClass="CheckboxList"></asp:CheckBoxList>
回答by Robusto
Maybe I don't understand your question, but for me this works fine:
也许我不明白你的问题，但对我来说这很好用：
<table>
<tr>
<td><input type="checkbox" name="cb1" id="cb1"><label for="cb1">Checkbox 1</label></td>
</tr>
<tr>
<td><input type="checkbox" name="cb2" id="cb1"><label for="cb2">Checkbox 2</label></td>
</tr>
<tr>
<td><input type="checkbox" name="cb3" id="cb1"><label for="cb3">Checkbox 3</label></td>
</tr>
<tr>
<td><input type="checkbox" name="cb4" id="cb1"><label for="cb4">Checkbox 4</label></td>
</tr>
<tr>
<td><input type="checkbox" name="cb5" id="cb1"><label for="cb5">Checkbox 5</label></td>
</tr>
</table>
If you can link to or show your HTML, maybe we can give you more help.
如果您可以链接或显示您的 HTML，也许我们可以为您提供更多帮助。
