html - 图像有一个很大的 margin-left 没有设置

Question

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

边距为 0(多次声明为 margin: 0)，使用 Firebug(Firefox 调试工具)它表示图像有 142px 的左边距。

代码如下(当然是简写):

<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 设置了“margin left”，既不在这里也不在 css 的任何地方。您可以在链接中看到它:http://ranierialthoff.com.br/elite/页脚之前的图像。

Answer 1

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

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

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