CSS：移动导航中的水平滚动

这是我网站的移动版

我想让sub-nav（Main |另一个长类别|）能够水平滚动。人们可以触摸屏幕并滚动（而不是像桌面浏览器那样使用滚动条）

怎么做？我不知道效果的名称，因此不知道如何恰当地描述它

更新： 我向它添加了

overflow-x

。但它是堆叠起来的，而不是跨越成一条线

---

这里有什么问题？

更新

根据注释，您需要使用jQuery计算菜单元素的总宽度：

$(function(){
    var menuWidth=0;
    $('.wrapper a').map(function(){
        menuWidth = menuWidth + $(this).outerWidth(true);
    });
    // + 15px to fix, this maybe vary in your project
    $('.wrapper').css('width', (menuWidth+15)); 
});

在容器CSS类上，您需要添加：

.subnav{
    overflow-y:hidden;
    overflow-x:scroll; 
    -webkit-overflow-scrolling:touch;
}

演示：

基本CSS滚动

只需将

overflow:scroll

添加到您的CSS导航类中，或以奇特的方式：

在iOS上进行奇特的CSS滚动

您可以尝试在CSS导航类中使用

-webkit overflow scrolling:touch

这在iOS上非常有效，对于其他设备，请检查以下问题：

---

我现在遇到了一个问题。。。。导航药片只是堆叠在一起。我能看到什么例子吗？如果你能提供更多的帮助，我会很高兴的。额外的堆栈问题现在解决了。我在nav内部做了一个包装，给它一个150%的宽度来进行破解。现在的问题是，第一个解决方案不是支持那么多。（在我国，手机浏览器的情况非常复杂）。我应该使用javascript吗？但是怎么做呢？你能提供一个JSFIDLE来开始原型设计吗？