Question

我有一系列需要淡入淡出并出现在背景中的背景图像。此背景图片显示在我的内容后面，居中，并且比我的内容更宽。我不希望此图像影响页面的宽度，因此容器div，ul或li元素上没有设置宽度。我需要确定为什么在我的背景图像上出现白色左边距。无论浏览器窗口有多宽，我的“test”li都会显示此边距。问题出现在浏览器中（已测试：FF，Safari，Chrome，IE8），与用于旋转和淡入淡出的javascript无关。

我确信这是一件很简单的事，我忽略了。很多人都感谢任何能指出我正确方向的人。

Link to an screenshot showing the problem.

Live example of the problem.

这个的HTML是：

<div id="hdrHomeWrap">
<ul id="hdrHome">
    <li class="hdrHome1"></li>
    <li class="hdrHome2"></li>
    <li class="test"></li>
</ul>

CSS：

#hdrHomeWrap {
margin: 0 auto;
position:relative;
top:-20px;
}
#hdrHome #hdrHome li {
margin:0;padding:0;
position:relative;
list-style:none;
}
#hdrHome li {
    display: block;
    height: 400px;
    display:none; /* hide the items at first only */
    list-style:none;
    }
    #hdrHome li.hdrHome1 {
    background: url('images/hdr-home1.jpg') no-repeat top center;
    }
    #hdrHome li.hdrHome2 {
    background: url('images/hdr-home2.jpg') no-repeat top center;
    }
    #hdrHome li.hdrHome3 {
    background: url('images/hdr-home3.jpg') no-repeat top center;
    }
    #hdrHome li.test {
    background: #F00;
    }

Answer 1

你有没有试过给ul（#hdrHome）一个保证金＆amp;填充0？

在CSS中，你有 #hdrHome #hdrHome li

我猜这是个错误。你要么错过了中间的“逗号”。

所以它应该像#hdrHome, #hdrHome li而不是其他

背景图像左边距问题

1 个答案: