使用内联块和文本对齐的DOM Equidistant div在通过JS插入时将不起作用

Question

我一直在尝试实现Chris Coyier的内联块+文本对齐解决方案，以自动在给定包装器的宽度中水平分配div。 http://css-tricks.com/equidistant-objects-with-css/

当元素被立即加载到DOM中时，这很有效，但由于某种原因，在通过JS以编程方式添加元素时失败。 就像浏览器只是忽略了css属性一样。

看看这个小提琴的一个非常基本的例子： http ： //jsfiddle.net/xmajox/NUJnZ/前两行是在HTML加载上添加的。 单击按钮可通过JS在运行时添加更多内容。

最初我认为它可能与使用伪元素有某种关系：之后我尝试使用DOM节点的不同版本： http ： //jsfiddle.net/xmajox/wnPSA/不幸的是它的反应完全相同。

任何人都知道为什么会这样？ 或者更好的是，如何修复/预防？

Answer 1

元素之间需要有某种形式的空白才能实现，请看： http ： //jsfiddle.net/NUJnZ/22/

请注意，在第三行中，DIV之间没有空格。 当jQuery追加新元素时，没有前导或尾随空格。

只需添加带有.before(' ')的尾随空格，并正确排列元素。 （如果你使用.after(' ') ，那么最后一个元素就会出现间距问题）

更新小提琴： http ： //jsfiddle.net/NUJnZ/24/