Question

我目前正在显示我的复选框列表：

foreach (var employee in Model.Employees) {        
    @Html.CheckBox(employee.Name);<br />   
}

如果你想要一个长列的复选框，这很好，但是我的列表变长了，所以我希望将它显示在2或3列中。

有一种简单的方法吗？我知道我可以创建一个表，然后为一列的Employees的前半部分放入一个for循环，然后在另一列中为另一半的Employees放入另一个for循环。但这似乎是如此原始，必须有一种更简单，更清洁的方式。

Answer 1

我会使用包含您的复选框的2或3个html列表，每个列表紧跟在标记中的下一个列表之后，并使用css将每个列表浮动到左侧。

如果有超过10个复选框，则此示例将复选框分为2个列表：

<强> CSS：

.multi-list 
{
    float: left;
    padding-right: 50px;
}

.clear
{
    clear: both;
}

带有Razor的HTML标记：

@{
    if (Model != null)
    {
        int itemCount = 0;        
        <ul class="multi-list">
            @foreach (var item in Model) {
                itemCount++;
                <li>
                    @Html.DisplayFor(modelItem => item.Name)
                    @Html.CheckBoxFor(modelItem => item.Active)
                </li>
                if (Model.Count() > 10 && itemCount == (int)(Model.Count() / 2))
                {
                    @Html.Raw("</ul><ul class=\"multi-list\">");
                }
            }
        </ul>
        <div class="clear"></div>
    }
}

显示多列复选框列表

1 个答案: