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

＆＃34;绽放＆＃34;图像是悬停效果的一部分。正如你所看到的那样，NOWHERE是＆＃34;剩余边缘＆＃34;设置，既不在这里也不在css的任何地方。您可以在链接中看到它：http://ranierialthoff.com.br/elite/页脚之前的图像。

Answer 1

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

Answer 2

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

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

如果你想集中他们。只需删除position:absolute中的#unidades img，然后保持text-align:center。

图像有一个很大的余量 - 没有设置

2 个答案: