3

我正在尝试创建一个包含图像的列表，并排，每个都有其链接和悬停效果。一切正常，除了图像在某处创建了 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 设置了“剩余边距”，既不在此处也不在 css 中的任何地方。您可以在链接中看到它：http : //ranierialthoff.com.br/elite/ 页脚之前的图像。

4

2 回答 2

3

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

于 2013-03-01T03:25:45.093 回答
3

我text-align:center在你的#unidades li元素中看到了。它将成为img中心。

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

如果你想集中他们。只需移入position:absolute并#unidades img保持text-align:center静止。

于 2013-03-01T03:30:29.497 回答