显示多列复选框列表 [英] Displaying a multi-column checkbox list

问题描述

我当前正在显示我的复选框列表，如下所示:

I'm currently displaying my list of checkboxes like this:

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

如果您想要一长列复选框，这很好，但是我的列表越来越长，所以我想在2列或3列中显示它.

This is great if you want one long column of checkboxes, but my list is getting long, so I want to display it in 2 or 3 columns.

有没有简单的方法可以做到这一点?我知道我可以创建一个表，然后将for循环放在雇员的前半部分的一列中，然后将另一个for循环放入雇员的另一半中的另一列中.但这似乎太原始了，必须有一种更简单，更简洁的方法.

Is there an easy way to do this? I know I can create a table, then put in a for loop for the first half of the Employees for one column, and then another for loop for the other half of the Employees in another column. But that seems so primitive, there has to be a simpler, cleaner way.

推荐答案

我将使用2或3个包含您的复选框的html列表，每个列表出现在标记中的下一个之后，并使用CSS将每个列表向左浮动.

I would use 2 or 3 html lists containing your checkboxes, each list appearing immediately after the next in the markup, and use css to float each list to the left.

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

This example will separate checkboxes in to 2 lists if there are more than 10 checkboxes:

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>
    }
}

这篇关于显示多列复选框列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！