在 vb.net 中构建复选框列表时强制换行答案

【问题标题】：Force a newline <br /> while building a checkboxlist in vb.net在 vb.net 中构建复选框列表时强制换行
【发布时间】：2013-11-27 15:35:44
【问题描述】：

我正在 vb.net 中构建一个复选框列表，它工作正常，除了布局。我想在某些点强制换行。现在看起来像这样：

我想在“ALL”复选框或“repeatColumns=4”之后强制换行，所以它看起来更像这样：

这可以在代码隐藏中完成吗？或者也许是在客户端用 javascript 写的东西？

此代码现在正在构建列表：

        While dr.Read
        mTXT = dr(0) & " (" & dr(1) & "-" & dr(2) & ")"
        LASTcnt += 1

        If (dr(0) <> LAST) Then
            If (LASTcnt > 0 And LAST <> String.Empty) Then
                'add an ALL for this 'group'
                L = New ListItem
                L.Text = LAST & " (ALL)"
                L.Value = L.Text
                'L.Attributes.Add("Style", "color: red;")
                L.Selected = False
                CBL_LOC.Items.Add(L)
                CBL_LOC.Items(CBL_LOC.Items.Count - 1).Attributes.Add("Style", "color: red;")
                dt.Rows.Add(L.Text, L.Selected)
            End If
            LASTcnt = 0
            LAST = dr(0)
        End If

        L = New ListItem
        L.Text = mTXT
        L.Value = mTXT
        L.Selected = True
        CBL_LOC.Items.Add(L)
        dt.Rows.Add(L.Text, L.Selected)
    End While

这是定义复选框的 .aspx 代码：

        <asp:CheckBox ID="chkAll_LOC" Text="Select All" runat="server" 
            AutoPostBack="True" Checked="True" />
        <asp:CheckBoxList ID="CBL_LOC" runat="server" RepeatDirection="Horizontal" 
            onclick="CheckCheck(this)"
            Font-Size="Small" Font-Names="Calibri" RepeatColumns="4">
        </asp:CheckBoxList>

【问题讨论】：

目前还不太清楚这段代码到底在做什么以及现在应该如何写入不同的列。
我将添加显示列表是如何定义的 .aspx 代码。
使用 CSS 做这件事有什么反对/限制？
没有异议……只是对 CSS 不太熟悉，也不知道如何使用 CSS 来完成

标签： asp.net vb.net checkboxlist

【解决方案1】：

如果您在自己的列表中布置每组复选框，只需将列表视为块元素即可处理每个“类别”所需的新行。如果你将它们包装在一个固定宽度的容器中，并且让嵌套的 li 元素是容器总宽度的 1/3 的内联块，那么你就可以使用列式布局。

例子：

<style type="text/css">
.container { width:400px;}
.container ul { display:block;}
.container ul li {  list-style:none; display:inline-block; width:90px; padding:0; margin:0; border-width:0;}
</style>
<div class="container">
    <ul>
        <li><label for="chkCT1">CT1</label><input id="chkCT1" type="checkbox" /></li>
        <li><label for="chkCT2">CT2</label><input id="chkCT2" type="checkbox" /></li>
        <li><label for="chkCT3">CT3</label><input id="chkCT3" type="checkbox" /></li>
        <li><label for="chkCTALL">CT (ALL)</label><input id="chkCTALL" type="checkbox" /></li>
    </ul>
    <ul>
        <li><label for="chkCT1">CT1</label><input id="chkCT1" type="checkbox" /></li>
        <li><label for="chkCT2">CT2</label><input id="chkCT2" type="checkbox" /></li>
        <li><label for="chkCT3">CT3</label><input id="chkCT3" type="checkbox" /></li>
        <li><label for="chkCTALL">CT (ALL)</label><input id="chkCTALL" type="checkbox" /></li>
    </ul>
    <ul>
        <li><label for="chkCT1">CT1</label><input id="chkCT1" type="checkbox" /></li>
        <li><label for="chkCT2">CT2</label><input id="chkCT2" type="checkbox" /></li>
        <li><label for="chkCT3">CT3</label><input id="chkCT3" type="checkbox" /></li>
        <li><label for="chkCTALL">CT (ALL)</label><input id="chkCTALL" type="checkbox" /></li>
    </ul>
</div>

【讨论】：