javascript - jQuery动态复选框位置、合并示例发现

Question

jquery动态添加复选框时，位置不正确:

我在 JSFiddle 中有一个添加复选框的示例(取自 stakoverflow) dynamically .

我还有一个link声称他们添加这个职位是正确的，

<!-- language: lang-js --> 
var $myCheckboxLabel = $("label[for='myCheckbox']");
$myCheckboxLabel.position({my:"left", at:"right", of:$myButton });

但这与提到的示例完全无关:

for (var i = 0; i < 40; i++) {
    $("fieldset").append('<input type="checkbox" name="' + name + '" id="id' + i + '"><label for="id' + i + '">' + name + ' ' + i + '</label>');
}

有人可以帮忙设置循环中添加的复选框的位置，这样它就不会显示在彼此旁边，而是显示在下一行。

Answer 1

您的 Javascript 适合您想要做的事情 - 它将生成正确的 HTML。问题是它们被“内联”显示，这意味着它们全部并排显示，尽可能多地显示在一行上，然后它会环绕一行。

您想要的是将它们显示为“ block ”元素，这意味着它有自己的行，下一个元素必须位于其下方。您只需使用 CSS 即可让它们执行此操作:

fieldset input[type=checkbox] { /* this can be more specific if you need it to be */
    display: block;
}

Here's a fiddle演示这个。