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