我有一个包含元素列表的对象。我想将它们显示为复选框按钮。我正在使用以下代码片段来生成单选按钮。他们工作正常。
for (var i = 0; i < mObject.removeList.length; i++) {
//Todo add logic of checkbox here
var lineBreak = "";
if ((i+1) % 3 == 0)
{
lineBreak = "<br />";
}
$('#' + listsDiv + 'RemoveList').append('<input type="checkbox" name="' + mObject.removeList[i].ItemName + '" value="' + mObject.removeList[i].ItemName + '" />' + mObject.removeList[i].ItemName + lineBreak);
}
问题是我想每行显示 3 个并均匀分布在一行中。我已经设法将它们分成三行,但我无法理解让它们每行都设置为三列的样式。如果我使用 css 在复选框上添加 margin-right,由于复选框文本的长度,它们会被分开但不会在列中均匀对齐。
我希望找到一个 CSS 解决方案,使它们显示在 3 列的行中,并将每个复选框对齐到各自列的左侧。
列表中的项数未知。
目前,此 css 未提供所需的输出。
input[type="radio"], input[type="checkbox"] {
margin-left:25px;
}
最佳答案
实现此目的的最简单方法是将所有复选框包装在 label
元素中。然后,您可以将 width: 33%
应用于这些标签,它们将自动填充任何容器中的三行。
使用 label
元素的另一个优点是它们增加了复选框的点击区域,因此您现在可以单击与输入关联的文本来检查它。
试试这个:
var mObject = {
removeList: [
{ ItemName: 'Foo1' },
{ ItemName: 'Foo2' },
{ ItemName: 'Foo3' },
{ ItemName: 'Foo4' },
{ ItemName: 'Foo5' },
{ ItemName: 'Foo6' },
{ ItemName: 'Foo7' },
{ ItemName: 'Foo8' }
]
}
for (var i = 0; i < mObject.removeList.length; i++) {
var itemName = mObject.removeList[i].ItemName;
// Note the <label> wrapper here...
$('#RemoveList').append('<label><input type="checkbox" name="' + itemName + '" value="' + itemName + '" />' + itemName + '</label>');
}
label {
display: inline-block;
width: 33%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="RemoveList"></div>
如果您能够针对支持 ES2015 的浏览器,您还可以通过使用 forEach()
来简化循环,如下所示:
mObject.removeList.forEach(function(o) {
var itemName = o.ItemName;
$('#RemoveList').append('<label><input type="checkbox" name="' + itemName + '" value="' + itemName + '" />' + itemName + '</label>');
})
关于javascript - 在复选框按钮选项列表上应用 css 规则,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41034253/