javascript - 没有滚动条的水平滚动标签

Question

我有一个基于 Materialize CSS ( http://materializecss.com/tabs.html ) 的带有不同选项卡的导航栏。我的选项卡多于适合浏览器窗口的宽度，因此它会自动生成一个水平滚动条。这对于现代网站来说很难看，所以我正在寻找一种隐藏它但仍允许滚动的方法。

关于 SO 的其他评论提到了对嵌套 div 使用定位，但是，我似乎无法在这种情况下使用它，所以我想知道是否有人可以指出我做错了什么？

下面是我目前的代码的代码笔: http://codepen.io/anon/pen/LGvQRP

代码如下:

<div class="row">
    <div class="col s12">
      <ul class="tabs">
        <li class="tab col s3"><a href="#test1">Test 1</a></li>
        <li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
        <li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li>
        <li class="tab col s3"><a href="#test4">Test 4</a></li>
        <li class="tab col s3"><a href="#test1">Test 1</a></li>
        <li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
        <li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li>
        <li class="tab col s3"><a href="#test4">Test 4</a></li>
        <li class="tab col s3"><a href="#test1">Test 1</a></li>
        <li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
        <li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li>
        <li class="tab col s3"><a href="#test4">Test 4</a></li>
        <li class="tab col s3"><a href="#test1">Test 1</a></li>
        <li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
        <li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li>
        <li class="tab col s3"><a href="#test4">Test 4</a></li>
      </ul>
    </div>
</div>

和 javascript:

$(document).ready(function(){
    $('ul.tabs').tabs();
});

此外，我想扩展它，以便选定的选项卡始终位于中间，并且在所有选项用完后重新启动时滚动将无限。有人对此有任何提示吗？

Answer 1

尝试:

<ul class="tabs" style="overflow-x: hidden">