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/

为什么水平列表项目对齐不适用于动态添加的项目

1 个答案: