2

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

这个小提琴演示了两个无序列表的问题，其中一个是静态填充的（成功），另一个是动态填充的（失败）。

这是代码：

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;
}
4

1 回答 1

2

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

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

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

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

于 2013-08-23T02:21:58.983 回答