Question

tl; dr看看http://jsfiddle.net/1f6j3o5u/1/ - 为什么原始复选框整齐地包裹但动态添加的复选框溢出？

我有几个复选框应该包装在他们的容器内，他们的标签不能“中断”。我的解决方案是：将div中的每个复选框都包裹起来：

<div class="filterlabel">
  <input type="checkbox" id="test1" />
  <label for="test1">test 1</label>
</div>

相关的风格是：

div.filterlabel {
  display: inline;
  white-space: nowrap;
}

如果静态添加复选框/ div，一切正常。但是，如果我将它们添加到例如一个循环使用jQuery，他们停止包装，只是逃避容器......

for (i = 1; i < 7; i++) {
  ($("<div></div>", {
    'class': 'filterlabel'
  }).append($("<input/>", {
    'type': 'checkbox',
    'id': 'othertest' + i
  })).append($("<label></label>", {
    'for': 'othertest' + i
  }).text("test " + i))).appendTo($('#Container'));
}

我做错了什么？动态添加的div是否有所不同？在浏览器中检查他们的风格表明应该完全没有区别......

Answer 1

渲染内联元素是个问题。 Display: inline-block;应该有所帮助： DEMO

Answer 2

for (i = 1; i < 7; i++) {
  ($("<div></div>", {
    'class': 'filterlabel',
    'style': 'display:inline-block'
  }).append($("<input/>", {
    'type': 'checkbox',
    'id': 'othertest' + i
  })).append($("<label></label>", {
    'for': 'othertest' + i
  }).text("test " + i))).appendTo($('#Container'));
}

动态添加的div溢出其容器

2 个答案: