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

Posted 2023-03-06

【中文标题】图像有很大的左边距，未设置

【英文标题】：Image has a big margin-left that was not set

【发布时间】：2013-02-15 11:49:19

【问题描述】：

我正在尝试创建一个包含图像的列表，并排放置，每个图像都有其链接和悬停效果。一切正常，除了图像在某处创建了 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/ 页脚之前的图像。

【参考方案1】：

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

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

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

【讨论】：

是的，这就是问题所在。否则我怎样才能“集中”它们？

两个图像必须在完全相同的位置（一个在另一个），所以我无法删除它，否则它们会并排对齐。没关系，我通过为图像设置固定大小得到了解决方法，所以我知道确切的宽度:)

【参考方案2】：

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

【讨论】：

好吧，我发现问题出在text-align: center;。图像的左侧位于 li 的中心，而不仅仅是集中。但很好的答案：D