1

我错过了一些简单的东西吗？谁能解释为什么图像向右移动？

红色边框是图像需要的位置，但看起来无序列表上的 LI 正在移动滑块中的图像，即使填充和边距设置为零。

我试过使用position: relative; left:-40;，但它会切断图像的右侧，除非我使用：width:XXpx; 我试图避免使用特定的宽度，因为这将用于响应式网页设计，并且我想根据设备的大小调整图像的大小。

示例代码：http: //jsfiddle.net/vaqdvb5g/

JavaScript 文件：

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//unslider.com/unslider.min.js" type="text/javascript"></script>

CSS：

.banner li { 
list-style: none; /* Lose the dot */
margin:0px;
padding:0px;
}

.banner ul li { 
margin:0px;
padding:0px;
float: left; 
}

#slider{
margin:0px;
padding:0px;
border:1px solid red;
}

HTML：

<div id="slider" style=""> 
<div class="banner">
    <ul>
        <li style="background-image: url(http://cdn.nliphonedwwwghan.savviihq.com/wp-content/uploads/2013/12/500px1-580x375.jpg); height:350px;"><a href="/testing"></a></li>
        <li style="background-image: url(http://cdn.nliphonedwwwghan.savviihq.com/wp-content/uploads/2013/12/500px1-580x375.jpg); height:350px;"><a href="testing"></a></li>
    </ul>
</div>
</div>    
<script>
        // main image settings
        $('.banner').unslider({
                arrows: false,
                delay: 2000,
                fluid: true,
                speed: 1000,
                dots: true
        });

</script>
4

2 回答 2

0

不要忘记边距。将此添加到您的样式表中。

.banner ul { 
    margin:0px;
    padding:0px;
}
于 2014-12-22T20:19:51.203 回答
0

在您的 CSS 代码中：

.banner li { 
list-style: none; /* Lose the dot */
margin:0px;
padding:0px;
}

应该：

.banner ul { 
  list-style: none; /* Lose the dot */
  margin:0;
  padding:0;
}

CSS 样式list-style是为ul元素设计的样式。这就是为什么您的滑块经常向右偏移的原因。“点”就在那里。在此处了解更多信息

于 2014-12-22T20:09:44.417 回答