javascript - 为什么水平列表项对齐不适用于动态添加的元素

Question

我正在创建一个 div 网格，我决定使用一个无序列表作为容器，这样我就可以利用水平对齐将包含 div 的列表项的优势。问题在于，理由仅适用于在页面加载之前编写的 HTML。如果我尝试使用 Javascript 动态创建和添加列表项，则理由失败。

这fiddle演示了两个无序列表的问题，其中一个静态填充(成功)，另一个动态填充(失败)。

代码如下:

HTML

<ul>
    <li><div></div></li>
    <li><div></div></li>
    <li><div></div></li>
</ul>

<ul id="list"></ul>  

Javascript

var list = document.getElementById("list");
for (var i=0; i<3; i++) {
    var li = document.createElement("li");
    var div = document.createElement("div");
    li.appendChild(div);
    list.appendChild(li);  
}  

CSS

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: justify;
}
ul:after {
    content: "";
    width: 100%;
    display: inline-block;
}
li {
    display: inline;
}
div {
    display: inline-block;
    width: 100px;
    height: 100px;
    background: #4391EE;
    border: 1px solid black;
}

Answer 1

静态版本和动态版本的主要区别是静态版本在每个元素之间有空格。

要修复动态版本，您还需要附加一些空格:

list.appendChild(document.createTextNode(" "));

这是一个演示:http://jsfiddle.net/thirtydot/kQNNe/1/