Css MVCCheckBoxList，多行复选框，正确排列的样式

我正在使用MVCCheckBoxList，它是我下载并安装的ASP.NETMVC的扩展。它工作得非常好，但是我有很多复选框，并且它会延伸到多行。在某些情况下，它将复选框置于与相应标签不同的行上。另一个问题是，我所有的复选框标签都有不同的长度。我现在使用的方法是，它只是在屏幕上创建复选框，当它到达行的末尾时，它只会进入下一行。我想让复选框排成漂亮的列，并且框对齐。有没有办法做到这一点？helper方法允许您指定一个将应用于每个复选框/标签组合的类，但是我在获取正确的CSS时遇到了问题

以下是视图中的代码：

<section>
<label>Select Activities</label>
<div id="activities">
    @Html.CheckBoxListFor(model => model.PostedActivities.ActivitiesIds,
                              model => model.AvailableActivities,
                              activity => activity.ValidActivityID,
                              activity => activity.desc,
                              model => model.IsSelected,
                              Position.Horizontal,
                              x => new { @class = "actcheckbox" })
</div>
</section>

以下是生成的HTML：

<section>
<label>Select Activities</label>
<div id="activities">
    <input checked="checked" class="actcheckbox" id="PostedActivities_ActivitiesIds511" name="PostedActivities.ActivitiesIds" type="checkbox" value="1"></input>
    <label class="actcheckbox" for="PostedActivities_ActivitiesIds511">Fishing</label> &nbsp;
    <input checked="checked" class="actcheckbox" id="PostedActivities_ActivitiesIds512" name="PostedActivities.ActivitiesIds" type="checkbox" value="2"></input>
    <label class="actcheckbox" for="PostedActivities_ActivitiesIds512">Hunting</label> &nbsp;
    <input class="actcheckbox" id="PostedActivities_ActivitiesIds513" name="PostedActivities.ActivitiesIds" type="checkbox" value="3"></input>
    <label class="actcheckbox" for="PostedActivities_ActivitiesIds513">Boating</label> &nbsp; <input class="actcheckbox" id="PostedActivities_ActivitiesIds514" name="PostedActivities.ActivitiesIds" type="checkbox" value="4"></input>
    <label class="actcheckbox" for="PostedActivities_ActivitiesIds514">Skiiing</label> &nbsp;
    <input class="actcheckbox" id="PostedActivities_ActivitiesIds515" name="PostedActivities.ActivitiesIds" type="checkbox" value="5"></input>
    <label class="actcheckbox" for="PostedActivities_ActivitiesIds515">Hiking</label> &nbsp;
    <input class="actcheckbox" id="PostedActivities_ActivitiesIds516" name="PostedActivities.ActivitiesIds" type="checkbox" value="6"></input>
    <label class="actcheckbox" for="PostedActivities_ActivitiesIds516">Biking</label> &nbsp;
    <input class="actcheckbox" id="PostedActivities_ActivitiesIds517" name="PostedActivities.ActivitiesIds" type="checkbox" value="7"></input>
    <label class="actcheckbox" for="PostedActivities_ActivitiesIds517">Swiming</label> &nbsp;
    <input class="actcheckbox" id="PostedActivities_ActivitiesIds518" name="PostedActivities.ActivitiesIds" type="checkbox" value="8"></input>
    <label class="actcheckbox" for="PostedActivities_ActivitiesIds518">Shopping</label> &nbsp;
    <input class="actcheckbox" id="PostedActivities_ActivitiesIds519" name="PostedActivities.ActivitiesIds" type="checkbox" value="9"></input>
    <label class="actcheckbox" for="PostedActivities_ActivitiesIds519">Surfing</label> &nbsp;
    <input class="actcheckbox" id="PostedActivities_ActivitiesIds520" name="PostedActivities.ActivitiesIds" type="checkbox" value="10"></input>
    <label class="actcheckbox" for="PostedActivities_ActivitiesIds520">Go Karts/ATV</label> &nbsp;
    <input class="actcheckbox" id="PostedActivities_ActivitiesIds521" name="PostedActivities.ActivitiesIds" type="checkbox" value="11"></input>
    <label class="actcheckbox" for="PostedActivities_ActivitiesIds521">Basketball</label> &nbsp; <input class="actcheckbox" id="PostedActivities_ActivitiesIds522" name="PostedActivities.ActivitiesIds" type="checkbox" value="12"></input>
    <label class="actcheckbox" for="PostedActivities_ActivitiesIds522">Tennis</label> &nbsp;
    <input class="actcheckbox" id="PostedActivities_ActivitiesIds523" name="PostedActivities.ActivitiesIds" type="checkbox" value="13"></input>
    <label class="actcheckbox" for="PostedActivities_ActivitiesIds523">Tubing</label> &nbsp;
    <input class="actcheckbox" id="PostedActivities_ActivitiesIds524" name="PostedActivities.ActivitiesIds" type="checkbox" value="14"></input>
    <label class="actcheckbox" for="PostedActivities_ActivitiesIds524">Paintball</label> &nbsp;
    <input class="actcheckbox" id="PostedActivities_ActivitiesIds525" name="PostedActivities.ActivitiesIds" type="checkbox" value="15"></input>
    <label class="actcheckbox" for="PostedActivities_ActivitiesIds525">Ice Skating</label> &nbsp;
    <input class="actcheckbox" id="PostedActivities_ActivitiesIds526" name="PostedActivities.ActivitiesIds" type="checkbox" value="16"></input>
    <label class="actcheckbox" for="PostedActivities_ActivitiesIds526">Snow Mobiling</label> &nbsp;
    <input class="actcheckbox" id="PostedActivities_ActivitiesIds527" name="PostedActivities.ActivitiesIds" type="checkbox" value="17"></input>
    <label class="actcheckbox" for="PostedActivities_ActivitiesIds527">Water Skiing</label> &nbsp; 
    <input class="actcheckbox" id="PostedActivities_ActivitiesIds528" name="PostedActivities.ActivitiesIds" type="checkbox" value="18"></input>
    <label class="actcheckbox" for="PostedActivities_ActivitiesIds528">Scuba Diving</label> &nbsp; 
    <input class="actcheckbox" id="PostedActivities_ActivitiesIds529" name="PostedActivities.ActivitiesIds" type="checkbox" value="19"></input>
    <label class="actcheckbox" for="PostedActivities_ActivitiesIds529">Shuffle Board</label> &nbsp; 
    <input class="actcheckbox" id="PostedActivities_ActivitiesIds530" name="PostedActivities.ActivitiesIds" type="checkbox" value="20"></input>
    <label class="actcheckbox" for="PostedActivities_ActivitiesIds530">Horseback Riding</label> &nbsp; 
</div>

选择活动
垂钓
狩猎
划船
滑雪
徒步旅行
骑自行车
游泳
购物
冲浪
卡丁车/亚视
篮球
网球
油管
彩弹
滑冰
雪地摩托
滑水
潜水
洗牌板
骑马

---

我的建议是设置成比例的宽度，使其不会缠绕。将它们设置为内联是一个好的开始

#activities {
    width: 100%;
}

#activities input {
    width: 5%;
}

#activities label {
    width: 20%;
}

---

您可以使用

：n个孩子（ood）

和

：n个孩子（偶数）

伪类。但是，我会让你弄明白的。

嗯，最大的问题是输入/标签组合没有包装在

或

标记中。如果您能够做到这一点，您的css就几乎足够了（JSFIDLE示例）

但是，由于您当前的html helper设置可能不支持这一选项，因此以下是我能想到的最佳选择（尽管它确实感觉像一个黑客）：

它的基本思想是将标签的宽度设为0，并使复选框占据其标签的空间。这让复选框的大小决定复选框及其标签何时应换行到下一行

注意：此方法要求固定标签的宽度。这可能是不可取的，但在你的情况下，因为你希望他们排得漂亮，这可能是你想要的。如果

#activities

div具有固定的宽度，则这也最有效，尽管这可能会导致跨设备兼容性问题

---

这就是一个例子。希望这是有用的。

请发布此助手生成的HTML。我用生成的HTML编辑了原始问题。这在我的问题上几乎是完美的。出于某种原因，我的在第一行做反向缩进。所以除了第一行，所有的行都排得很好。你有截图或代码吗？通过使用第n个子项（1）并使用其

左

和

边距左

属性，只需针对第一个复选框（或标签）即可修复。我得到了它。谢谢我将“float:left”添加到您在上面给我的每个CSS规则中，它修复了它！

#activities {
    width: 100%;
}

#activities input {
    width: 5%;
}

#activities label {
    width: 20%;
}

input.actcheckbox {
    display: inline-block;
    margin-right: 120px;
}

label.actcheckbox {
    display: inline-block;
    position: relative;
    left: -120px;
    white-space: nowrap;
    width: 0;
}