Question

我有以下项目。

left arrow  slide1 slide2 slide3 slide4 slide5... right arrow

我希望能够在我的div中使用horizontal滚动条。

我有类似的东西

<section id='slide-container'>
        <div id='left-nav'><a href='#'><img src='images/left-nav.png'/></a></div>
        <ul id='slide-list'>
            <li><img src='images/slide1.png' /></li>
            <li><img src='images/slide2.png' /></li>
            <li><img src='images/slide3.png' /></li>
            <li><img src='images/slide4.png' /></li>
            <li><img src='images/slide5.png' /></li>
            <li><img src='images/slide1.png' /></li>
            <li><img src='images/slide2.png' /></li>
            <li><img src='images/slide3.png' /></li>
            <li><img src='images/slide4.png' /></li>
            <li><img src='images/slide5.png' /></li>
        </ul>       
    </section>

CSS

#slide-container{ 
    width: 970px;
    height: 190px;  
    line-height: 190px;
    border:solid 1px #EEEEEE;
    position: relative;
    overflow: scroll;
}

我只能看到垂直滚动条，我的幻灯片垂直对齐。我希望有人可以帮助我保持我的幻灯片水平对齐并显示滚动条。

我的大脑被炒了......

非常感谢！

Answer 1

要#slide-container添加white-space: nowrap; overflow: auto;。

#slide-list li添加display: inline-block;。

Answer 2

请用这个替换你的风格

   #slide-container{ 
    width: 970px;
    height: 190px;  
    line-height: 190px;
    border:solid 1px #EEEEEE;
    position: relative;
    overflow-y:hidden;
    overflow-x: scroll;
    display:block;
}
#slide-list
{
    width:1500px; /*i put this for see the scrolling/*
}

如何为div创建水平滚动条

2 个答案: