CSS，尽管有容器，但仍然保持在一条线上

Question

我正在尝试使用滑块进行响应式设计。我必须将这些图像保存在一行上，即使它们有一个容器div。我需要这个才能正确地做滑块。我想删除容器类但是如果我删除容器怎么能居中？

这是小提琴 http://jsfiddle.net/smtjZ/

 <div id="middle">
     <div class="container">
        <div id="works">
           <h3>LATEST WORKS</h3>
              <div id="workslider">


<!-- workslideritem -->
<div class="workslideritem">
<a href="#"><img src="images/workslideritem.jpg" alt="" /></a>
</div>
<!-- workslideritem -->




              </div>  
         </div>
    </div>
</div>

Container div有max-width:1000px。

Answer 1

您在项目上使用white-space而不是在容器上。

jsFiddle Demo

#workslider
{
    margin-top:20px;
    white-space:nowrap;
}
.workslideritem
{
    display:inline-block;
    width:20%;
    margin-right:4%;
    position:relative;
}