如何为div创建水平滚动条

debugcn 发表于 Dev

飞猫

我有以下物品。

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

我希望能够horizontal在我的div中具有滚动条。

我有这样的东西

<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;
}

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

我的大脑炸了...

非常感谢！

Sheng Slogar

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。