javascript - 插入javascript元素后应用css

Question

我有一个名为“thumbs”的 div 和一个用图像填充它的 javascript 函数

function fillThumbs(){
    for (i=0; i<images.length; i++){
    var imageX = document.createElement("img");
    imageX.src = images[i];
    document.getElementById("thumbs").appendChild(imageX);
    }

}

然后是我的CSS代码

#thumbs{
margin: 0 auto;
}

#thumbs img{
width: 220px;
margin: 0 10 10 0;
}

问题:thumbs div 没有居中，#thumbs img 也没有正确间隔。看起来 margin 属性被忽略了，而图像的宽度是正确通过。

Answer 1

没有应用边距，因为它们没有任何单位。您需要 px 或类似的(在不为 0 的值上；CSS 可以使用没有单位的 0):

#thumbs{
margin: 0 auto;
}

#thumbs img{
width: 220px;
margin: 0 10px 10px 0;
/*          ^^   ^^     */
}

实例:

var i;
function fillThumbs(){
    for (i=0; i<5; i++){
    var imageX = document.createElement("img");
    imageX.src = "https://www.gravatar.com/avatar/e459e3d0f28452212c5958e54f658ef8?s=32&d=identicon&r=PG";
    document.getElementById("thumbs").appendChild(imageX);
    }

}
fillThumbs();

#thumbs{
margin: 0 auto;
}

#thumbs img{
width: 220px;
margin: 0 10px 10px 0;
}

<div id="thumbs"></div>

提示:要诊断此类问题，请右键单击浏览器中的元素并选择“检查元素”(如果没有该选项，请使用 Chrome 或 Firefox)。使用它，然后查看浏览器的开发工具以了解未应用 CSS 的原因。以下是 Chrome 的开发工具向我展示的内容:

然后如果我将鼠标悬停在方便的警告图标上: