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 text-align设置为center。或者以整个表为中心，给它一个固定的宽度，并将左/右边距设置为自动。

样式asp：引导程序面板中的复选框列表

1 个答案: