我正在研究图像 slider 。我实际上想做的是将图像并排放置，但我一直在尝试使用 display: inline-block 和 float 来做到这一点: left...但它们似乎都不起作用，我也不知道为什么。我会把 JS fiddle 留给你，看看是否有人可以帮助我。我想使用 display inline-block 而不是 float:left 来实现。
HTML代码
<body>
<div id='window'>
<div id='slide-window'>
<ul id='slides'>
<li class='slide'><img src="http://files.chess.com/images_ads/chesscom_logo_on_dark-copy.png"></li>
<li class='slide'><img src="http://i.stack.imgur.com/ykt9V.png"></li>
<li class='slide'><img src="https://raw.github.com/andrew-yavtushenko/css-style-guide/master/dog.jpg"></li>
</ul>
</div>
</div>
</body>
CSS 代码
#slide-window
{
margin: 0;
padding: 0;
position: relative;
/*overflow: hidden;*/
}
#slides
{
display: inline-block;
margin: 0;
padding: 0;
list-style: none;
position: relative;
}
#slides li
{
float: left;
position: relative;
left: 0;
top:0;
}
#window
{
width: 400px;
height: 400px;
background: black;
margin: 2em auto 0 auto;
}
最佳答案
在#window 上设置overflow:hidden 并给#slide-window 设置与所有图像的总宽度相同的宽度。
关于jquery - 从头开始制作图像 slider ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15870448/