我在MDL中了解到我可以使用布局选项卡栏并创建可滚动的选项卡，但有没有办法使用内容选项卡执行此操作？ Here是包含内容标签的codepen，但是如果你使用了太多的内容标签，那么它们会混杂在一起。我只是喜欢顶部导航栏上的布局选项卡上的内容选项卡外观。
<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>