2

div のグリッドを作成していますが、順序付けされていないリストをコンテナーとして使用することにしました。これにより、div を含むリスト項目を水平方向に揃えることができます。問題は、正当化がページの読み込み前に書かれた HTML でのみ機能することです。リスト アイテムを JavaScript で動的に作成して追加しようとすると、正当化に失敗します。

このフィドルは、2 つの順序付けられていないリストの問題を示しています。1 つは静的に入力され (成功)、もう 1 つは動的に入力されます (失敗)。

コードは次のとおりです。

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 に答える