javascript - 动态添加的 div 溢出其容器

Question

tl;博士看看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