html - 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>

容器 div 有max-width:1000px.

Answer 1

您使用white-space的是物品而不是容器。

jsFiddle 演示

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