Javascript 如何为div创建水平滚动条

我有以下几项

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

我希望能够在我的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>

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

我的大脑被炸了

非常感谢
 至
#滑动容器
添加
空白：nowrap；溢出：自动

对于
#幻灯片列表li
添加
显示：内联块
请用此替换您的样式

   #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/*
}

   #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/*
}