Html 可滚动的MDL内容选项卡

我知道在MDL中，我可以使用布局选项卡栏并创建可滚动的选项卡，但有没有一种方法可以通过内容选项卡实现这一点？是一个带有内容标签的代码笔，但是如果你使用了太多的标签，它们就会混在一起。我只是更喜欢内容选项卡的外观，而不是顶部导航栏上的布局选项卡

<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
    <div class="mdl-tabs__tab-bar">
        <a href="#" class="mdl-tabs__tab">Tab 1</a>
        <a href="#" class="mdl-tabs__tab">Tab 2</a>
        <a href="#" class="mdl-tabs__tab">Tab 3</a>
        <a href="#" class="mdl-tabs__tab">Tab 4</a>
        <a href="#" class="mdl-tabs__tab">Tab 5</a>
        <a href="#" class="mdl-tabs__tab">Tab 6</a>
        <a href="#" class="mdl-tabs__tab">Tab 7</a>
        <a href="#" class="mdl-tabs__tab">Tab 8</a>
        <a href="#" class="mdl-tabs__tab is-active">Tab 9</a>
        <a href="#" class="mdl-tabs__tab">Tab 10</a>
        <a href="#" class="mdl-tabs__tab">Tab 11</a>
        <a href="#" class="mdl-tabs__tab">Tab 12</a>
        <a href="#" class="mdl-tabs__tab">Tab 13</a>
        <a href="#" class="mdl-tabs__tab">Tab 14</a>
        <a href="#" class="mdl-tabs__tab">Tab 15</a>
        <a href="#" class="mdl-tabs__tab">Tab 16</a>
        <a href="#" class="mdl-tabs__tab">Tab 17</a>
        <a href="#" class="mdl-tabs__tab">Tab 18</a>
        <a href="#" class="mdl-tabs__tab">Tab 19</a>
        <a href="#" class="mdl-tabs__tab">Tab 20</a>
    </div>
</div>

如果您需要这么多的标签，您可能不应该首先使用标签按钮。首选的解决方案（可访问性和可用性方面）不是滚动它们，而是将它们替换为包含所有选项的下拉列表（如有必要，可垂直滚动和搜索）。@AndreiGheorghiu是的，我考虑过使用下拉框，但我真的很想使用选项卡。标签的数量并不是一个真正的问题，因为它们不会被频繁使用。我正试图获得一个与谷歌类似的外观（在谷歌上搜索类似“mlb”的东西，看看他们是如何显示日程安排的）。@dustin486你有没有找到解决方案？标题标签有一个滚动解决方案，这有点令人恼火，但是团队似乎刚刚忘记了内容标签。我真的不想去破解一个解决方案。我更喜欢使用mdl解决方案。