Javascript 导航div滚动条

嗨，我有一个叫做“nav”的div，它包含一个类为“thumbs”的div。我试图创建一个目录，比如div，可以滚动显示更多的缩略图

这是到目前为止我的CSS：（注意，每个拇指都是位置：绝对的，并且是左：相应地定位的）

我希望它是可滚动的，这样，如果缩略图超过768px（导航宽度），它可以滚动到左边查看更多

谢谢

---

编辑：我忘了提到我是在PhoneGap中做这件事的。这将是一个移动应用程序。谢谢

移除

位置：绝对和添加<代码>浮动：左来自拇指类。应该这样做

更新

如果预先知道拇指的数量，可以通过CSS设置内部div的宽度。否则，可以将其设置为onload或通过JS添加/删除拇指时

$('#div').css('width', ($('.thumbs').length * $('.thumbs:first').outerWidth(true)) + 'px');

您可以通过结合使用
最大宽度
，
显示：内联块
和
空白
来实现这一点。
像这样：

#nav_outer {
    position:absolute;
    bottom:0px;
    background:gray;
    overflow:auto;
}
#nav {
    height:214px;
    max-width: 300px;
    bottom:0px;
    /*-webkit-transform:translateY(214px);*/
    background:gray;
    white-space:nowrap;
}
.thumbs {
    white-space:normal;
    display:inline-block;
    *display:inline; /*IE7*/
    *zoom:1; /*IE7*/
    width:80px;
    height:100px;
    margin:10px 10px 10px 10px;
    background:white;
}

在我的例子中，当
.thumbs小于300px的宽度时，
就没有滚动条了
为了更好地理解，你能举个例子吗。大拇指刚好在第一组下方：（检查这个提琴：-我添加了一个外部div以确保它滚动。这个提琴假定内部div的宽度已知，而不是自动扩展的示例（当他的内容长度可变时会发生什么情况）？如果预先知道拇指的数量，则可以通过CSS设置内部div的宽度。否则，可以在加载时或通过JS添加/删除拇指时设置它-
$（'#div'）。CSS（$，（$（'.thumbs'）。长度*$（'.thumbs:first'）。外部宽度（true））+“px'）；
-也将使用该信息更新答案。
#nav_outer {
    position:absolute;
    bottom:0px;
    background:gray;
    overflow:auto;
}
#nav {
    height:214px;
    max-width: 300px;
    bottom:0px;
    /*-webkit-transform:translateY(214px);*/
    background:gray;
    white-space:nowrap;
}
.thumbs {
    white-space:normal;
    display:inline-block;
    *display:inline; /*IE7*/
    *zoom:1; /*IE7*/
    width:80px;
    height:100px;
    margin:10px 10px 10px 10px;
    background:white;
}