5

我一直在尝试实现 Chris Coyier 的 inline-block + text justify 解决方案，以在给定的包装器宽度中自动水平分布 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/ 不幸的是它的反应方式完全相同。

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

4

1 回答 1

7

元素之间需要有某种形式的空格才能起作用，请参见：http: //jsfiddle.net/NUJnZ/22/

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

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

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

于 2012-10-10T14:58:37.660 回答