html - 样式 asp :Checkboxlist in bootstrap panel

Question

我正在尝试为动态加载的复选框列表制作一个漂亮的布局，但在 CSS 方面我相当无能。我希望复选框填充面板主体中的空间，居中对齐，然后开始新的一行。重复列属性使它们成为一个漂亮的表格，但我无法在面板主体内将它们居中对齐。

HTML

<div id="chkBxDiv" runat="server" class="panel panel-danger">
    <div class="panel-heading">Attribute Removal</div>
    <div class="panel-body center-block">
        <asp:CheckBoxList ID="checkBoxList" runat="server" RepeatDirection="Horizontal" RepeatColumns="4" cssclass="chkboxList"></asp:CheckBoxList>
    </div>
    <div class="panel-footer">
        <asp:Button ID="removeAttrBtn" class="btn btn-danger" runat="server" Text="Remove Selected Attributes" />
    </div>
</div>

C#

private void populateCheckGrid()
{
    string virusId;
    using (VirusDescriptionActions usersVirus = new VirusDescriptionActions()){
        virusId = usersVirus.GetVirusId();
    }
    List<Virus_Item> currentVirus = getVirus(virusId);
    foreach (Virus_Item V in currentVirus)
    {
        ListItem item = new ListItem();
        item.Text = V.AttributeId.ToString();
        item.Selected = false;
        checkBoxList.Items.Add(item);
    }
}

Answer 1

这是 asp:CheckBoxList 在 HTML 中呈现的方式:

<table id="MainContent_ctl00">
    <tbody>
        <tr>
            <td>
                <input id="MainContent_ctl00_0" name="ctl00$MainContent$ctl00$0" value="text1" type="checkbox">
                <label for="MainContent_ctl00_0">text1</label>
            </td>
        </tr>
        <tr>
            <td>
                <input id="MainContent_ctl00_1" name="ctl00$MainContent$ctl00$1" value="text2" type="checkbox">
                <label for="MainContent_ctl00_1">text2</label>
            </td>
        </tr>
    </tbody>
</table>

因此，为表格元素、输入和标签设置相应的 CSS 样式。一些建议:将表格和 td 宽度设置为 100%，将 td 文本对齐设置为居中。或者以整个表格为中心，给它一个固定的宽度并将左/右边距设置为自动。