jquery 循环生成的垂直对齐复选框

Question

如何让复选框垂直对齐？

我要

[] Full Feed
[] Trip Feed
[] Flight Feed

这看起来很简单，但我已经 "vertical-align:middle;" 尝试了几个位置。

最理想的是，我想在此处的某处设置对齐方式：

$.each(myjson, function (i, v) {
    var feedname = this.name
        $("#calsubscribe").append($("<label>").text(this.name).prepend(
            $("<input>").attr({
                'type': 'checkbox', 
                'class' : 'inp-checkbox', 
                'name':'subscribecal',
                "data-feed": feedname,
                "style":'vertical-align:middle;'
            }).val(this.id)
               .prop('checked', this.checked)
        ));
    });

谢谢。

Answer 1

要实现这一点，您可以使用 CSS:

将 label 元素设置为在其容器内以块级显示

#calsubscribe label { 
  display: block; 
}

Updated fiddle

Answer 2

或者只是 ...$("<br><input>").attr({...

结帐DEMO

jquery 循环生成的垂直对齐复选框

vertical align checkboxes generated by jquery loop

html

javascript

css

jquery

jsfiddle