附加 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 设为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';