Floating Div - 停止清除/包装

Question

我有一系列浮动 div，我想在水平线上旋转到无穷大（继续浮动）。这些 div 需要在有限宽度的 div 内继续。最终，我想按左右的 div/按钮来滚动项目（与使用滚动条相比）。

我无法让 div 保持在浮动范围内。一旦它们在父 div 中用完空间，它们就会开始换行。

有没有办法绕过包装？一旦我弄清楚了，下一步就是使用 jQuery 让水平在单击时向左/向右移动，以便复制水平滚动。

这是我做的小提琴和代码：

http://jsfiddle.net/stfzy/8/

HTML：

<div id='container'>
    <div id='arrowL'>
    </div>
    <div id='arrowR'>
    </div>
    <div class='list'>
        <div class='item'>
        </div>
        <div class='item'>
        </div>
        <div class='item'>
        </div>
        <div class='item'>
        </div>

    </div>

CSS：

#container{
width:340px;
    height:50px;
}

.list{
    background:grey;
width:300px;
    height:50px;
    float:left;
}


#arrowR{
background:yellow;
    width:20px;
    height:50px;
    float:right;
}


#arrowL{
background:yellow;
    width:20px;
    height:50px;
    float:left;
}

.item{
    background:green;
width:140px;
    height:40px;
    margin:5px;
    float:left;
}

任何和所有的帮助表示赞赏。谢谢！

Answer 1

试试这个，通过将列表类包装在具有溢出：隐藏的容器内。然后，您可以使用 JQuery 对内部 div 做任何您想做的事情。

Sample Fiddle

#list-container {
overflow:hidden;    
width: 300px;   
}

.list{
background:grey;
min-width:700px;
float:left;
}