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/