图像有很大的左边距，未设置

Question

我正在尝试创建一个包含图像的列表，并排放置，每个图像都有其链接和悬停效果。一切正常，除了图像在某处创建了 142px 的左边距。

边距为 0（多次声明为 margin: 0），并且使用 Firebug（Firefox 调试工具）表示图像的左边距为 142 像素。

代码如下（当然缩短了）：

<div id="">
    <ul>
        <li><a href=""><img src="" /><img class="bloom" src="" /></a></li>
        <li><a href=""><img src="" /><img class="bloom" src="" /></a></li>
        <li><a href=""><img src="" /><img class="bloom" src="" /></a></li>
    </ul>
</div>

还有css：

# {
    height: 185px;
    padding: 16px 0px;
    position: relative;
    width: 100%;
}

# ul {
    list-style: none;
    width: 951px;
}

# li {
    background: black; /*just to verify if the margin was on the LI or IMG*/
    float: left;
    height: 185px;
    margin: 0 16px;
    width: 285px;
}

# img {
    position: absolute;
}

# img.bloom {
    display: none;
    z-index: 1;
}

“绽放”图像是悬停效果的一部分。 如您所见， NOWHERE 设置了“剩余边距”，既不在此处也不在 css 中的任何地方。您可以在链接中看到它：http://ranierialthoff.com.br/elite/ 页脚之前的图像。

Answer 1

我在您的 #unidades li 元素中看到了 text-align:center。它将使img居中。

您可以将其更改为left 以解决您的问题。

如果你想集中它们。只需删除#unidades img 中的position:absolute 并保持text-align:center 不动。

Answer 2

这不是左边距，而是图像的位置。您的问题是您绝对定位图像而没有告诉浏览器 在哪里 放置它们。您需要添加top: 0; left: 0; 或类似您的#unidades img 样式。