i'm creating grid of divs, , decided use unordered list container, can take advantage of horizontally justifying list items contain divs. problem justification works html written in advance of page load. if try create , add list items dynamically javascript, justification fails.
this fiddle demonstrates problem 2 unordered lists, 1 populated statically (succeeds) , other dynamically (fails).
here's code:
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"); (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; }
the principal difference between static version , dynamic version static version has whitespace between each element.
to fix dynamic version, need append whitespace:
list.appendchild(document.createtextnode(" ")); here's demo: http://jsfiddle.net/thirtydot/kqnne/1/
