我有一个包含ul的div,每个li都有一张图片.我已经漂浮了剩下的图片,让它们排成一条直线但是一旦它到达div的末尾,它就会包裹起来.我希望这些图片继续向右,隐藏,以便我能够创建一个旋转木马.我的代码如下.
<div id="container">
<div class="lfbtn"></div>
<ul id="image_container">
<li class="the_image">
<img src="" />
</li>
</ul>
<div class="rtbtn"></div>
</div>
CSS
#container {
width: 900px;
height: 150px;
margin: 10px auto;
}
#image_container {
position: relative;
left: 50px;
list-style-type: none;
width: 700px;
height: 110px;
overflow: hidden;
}
#image_container li {
display: inline-block;
padding: 7px 5px 7px 5px;
float: left;
}
.lfbtn {
background-image: url(../../img/left.gif);
background-repeat: no-repeat;
margin: 10px;
position: relative;
float: left;
top: -12px;
left: 50px;
height: 90px;
width: 25px;
}
.rtbtn {
background-image: url(../../img/right.gif);
background-repeat: no-repeat;
height: 90px;
width: 25px;
margin: 10px;
position: relative;
top: -101px;
left: 795px;
}
提前致谢！
解决方法
更新您的风格以反映这一点：
<div id="container">
<div class="lfbtn"></div>
<div style="width: 700px; overflow: hidden;">
<ul id="image_container" style="width: 1000000px;">
<li class="the_image">
<img src="Untitled-1.gif" />
</li>
</ul>
</div>
<div class="rtbtn"></div>
<br style="clear: both;" />
</div>
您需要在包装UL的div上设置宽度,然后在其上设置溢出.将您的UL设置为具有一定的宽度,以便即使有很多LI也不会包装.
