插入 javascript 元素后应用 css答案

【问题标题】：Apply css after inserting javascript elements插入 javascript 元素后应用 css
【发布时间】：2015-09-03 17:54:20
【问题描述】：

我有一个名为“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 属性被忽略了，而图像的宽度是正确通过。

【问题讨论】：

jsfiddle 我的朋友会很好
#thumbs { text-align: center; } 应该可以工作
边距：0 10 10 0 -> 边距：0 10px 10px 0;
除了值之外，您还需要为边距指定一个单位。

标签： javascript html css

【解决方案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;
}

&lt;div id="thumbs"&gt;&lt;/div&gt;

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

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

【讨论】：

【解决方案2】：

只要值不等于 0，您应该始终提供一个单位。更改您的 css 如下：

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

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

【讨论】：