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

我一直在尝试实现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/
不幸的是,它的反应完全相同.

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

为了实现这一点,元素之间需要有某种形式的空白,请参阅: http://jsfiddle.net/NUJnZ/22/

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

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

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

相关文章
相关标签/搜索