插入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;
}

问题：拇指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的开发工具向我展示的内容：

然后如果我悬停方便的警告图标：

Answer 2

一旦值不等于0，你应该总是提供一个单位。改变你的css如：

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

margin: 0 auto;只会在知道宽度的情况下将#thumbs节点居中。试着给它一个宽度。