CheckboxList 显示对齐？答案

【问题标题】：CheckboxList to display aligned?CheckboxList 显示对齐？
【发布时间】：2010-04-27 16:36:23
【问题描述】：

我做了一个 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>

这是一个屏幕截图

【问题讨论】：

标签： asp.net html css alignment checkboxlist

【解决方案1】：

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

【讨论】：

我希望它在屏幕中间居中，但我想我必须为此使用边距技巧。这解决了这个问题，现在一切都在垂直的列中！
仅供参考，我使用此处的<div> 居中提示修改了我的示例：stackoverflow.com/questions/114543/how-to-center-div-in-div

【解决方案2】：

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

Style="text-align='left'";

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

【讨论】：

其中一部分对我有用。我知道这是将近 8 年前的事了，但 2018 年 CheckBoxList 中没有“Style=...”。但是 TextAlign 和 CellSpacing 一样帮助了我。

【解决方案3】：

不使用 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>

【讨论】：

【解决方案4】：

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

<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，也许我们可以为您提供更多帮助。

【讨论】：

@Rob 它在一个居中的 div 中，所以可能对它有一些影响？但是在复选框列表上使用text-align: left 也不起作用。查看我的编辑
你能发布输出的标记吗？答案就在那里，我敢肯定。我从不喜欢那些 asp 控件，那些总是输出古怪 HTML 的泄漏抽象。
如果你好奇的话，标记看起来几乎和你的一模一样，除了 width= 位..