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 回答