Question

我错过了一些简单的东西吗？任何人都可以解释为什么图像向右移动了吗？

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

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

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>

Answer 1

在您的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元素设计的样式。这就是为什么你的滑块偏向右边的原因。＆＃34; dot＆＃34;在那里。了解更多信息here

Answer 2

也不要忘记保证金。将其添加到样式表中。

.banner ul { 
    margin:0px;
    padding:0px;
}

使用LI标签和图像滑块的CSS位置问题

2 个答案: