CheckboxList显示对齐?

时间:2010-04-27 16:36:24

标签: asp.net html css alignment checkboxlist

我制作了一个CheckboxList,它不会排队。我没有看到任何方法来控制生成的HTML。现在,由于每个复选框标签的<td>的宽度是自动宽度,因此复选框不对齐。如何设置此宽度并使所有标签和复选框显示在两个垂直对齐的列中?

我的代码很简单:

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

这是一个截屏

alt text http://img718.imageshack.us/img718/6824/checkboxlist.png

4 个答案:

答案 0 :(得分:8)

你可以将它包含在另一个左对齐的<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>

答案 1 :(得分:2)

只需将以下内容添加到您的复选框列表

即可
  

形式= “文本对齐= '左'”;

<asp:CheckBoxList ID="CheckBoxList1" runat="server" TextAlign="Right" Style="text-align='left';"
                                        RepeatColumns="10" RepeatDirection="Vertical" CellSpacing="20">

答案 2 :(得分:2)

不使用DIV和其他元素和固定大小。 我们可以“通过设置对齐复选框列表文本  “浮动:左”到复选框列表输入类型  在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>

答案 3 :(得分:0)

也许我不明白你的问题,但对我来说这很好用:

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

如果您可以链接或显示您的HTML,也许我们可以为您提供更多帮助。