0

我正在研究图像滑块。我实际上想要做的是将图像放在另一个旁边，但我一直在尝试这样做display: inline-block，也float:left......但它们似乎都不起作用，我不知道为什么. 我会把 JS 小提琴留给你，看看是否有人可以帮助我。我想使用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;

}

http://jsfiddle.net/xtatanx/EbjWS/

4

1 回答 1

1

设置overflow:hidden并#window提供#slide-window与所有图像的总宽度相同的宽度。

于 2013-04-08T02:47:00.040 回答