Question

我有一个导航栏，其中包含基于Materialise CSS（http://materializecss.com/tabs.html）的不同选项卡。我有更多的选项卡，而不是适合浏览器窗口的宽度，因此它会自动生成一个水平滚动条。对于现代网站来说这是不雅观的，所以我正在寻找一种方法来隐藏它但仍允许滚动。

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

以下是我的代码的代码栈： http://codepen.io/anon/pen/LGvQRP

以下是代码：

<ImageView
    android:id="@+id/showThumbnail"
    android:layout_width="150dp"
    android:layout_height="150dp"
    android:layout_centerHorizontal="true"
    android:contentDescription="@string/suggest_attachedpreview" />

和javascript：

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

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

Answer 1

尝试：

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

水平滚动选项卡没有滚动条

1 个答案: