добавление DIV происходит вертикально

Question

В приведенном ниже коде progressDiv - это DIV, который создается Но он строится вертикально ... мне нужно горизонтально ... Что мне делать?

    var progressDiv = document.getElementById('progressDiv')
    var div = document.createElement('div');

    div.style.display = 'block';
    div.style.cssFloat = 'left';
    div.style.width = '10px';
    div.style.height = '10px';
    div.style.backgroundColor = 'red';
    div.style.border = '1px solid black';

    progressDiv.appendChild(div);
    if (progressDiv.childNodes.length == 20)
        while (progressDiv.hasChildNodes())
            progressDiv.removeChild(progressDiv.firstChild);

Answer 1

Ах, старый добрый IE. Если вы сделаете div a span, установите стиль на inline-block и сбросите поплавок, он должен работать:

var progressDiv = document.getElementById('progressDiv');
var span = document.createElement('span');

span.style.display = 'inline-block';
span.style.width = '10px';
span.style.height = '10px';
span.style.backgroundColor = 'red';
span.style.border = '1px solid black';

progressDiv.appendChild(span);
if (progressDiv.childNodes.length == 20) {
    while (progressDiv.hasChildNodes()) {
        progressDiv.removeChild(progressDiv.firstChild);
    }
}

Почему span, а не div? Потому что IE не любит, когда вы пытаетесь встроить элементы, которые по умолчанию блокированы, даже если вы измените их display. Но это нормально, если блокировать встроенные элементы по умолчанию.

Не знаю, если падение поплавка испортит то, что вы пытаетесь сделать. Но если вы просто пытаетесь сделать индикатор выполнения, все будет хорошо, если вы сохраните progressDiv достаточно широким.

Answer 2

div.style.display = 'inline'

работал для меня.

Answer 3

div.style.cssFloat = 'left'; должно быть div.style.float = 'left';