这是一个常见的解决方案，为您的问题，绝对不专业，如果你喜欢测试它，因为我测试了它，它工作没有任何问题。只需将以下代码添加到ul标记：

ul {
     display: flex;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
}

通过这样做，所有的标签将在x轴上滚动（只有标签和内容或其他页面对象不会滚动），您可以显示尽可能多的标签，没有任何问题。您甚至可以将选项卡移动到侧列，以获得更好、更漂亮的显示，这当然会使您的内容具有更少的空间，所以这一切都取决于您。

+更新

要使选项卡的外观更好一点，可以使用以下代码：

ul {
     display: flex;
     overflow-x: auto;
     text-wrap: nowrap;
     -webkit-overflow-scrolling: touch;
     width: 96%;
     padding: 0 1rem 0 1rem;
}

此外，因为我看到你的设计有border-radius，这就是为什么我发送这个更新来应用你的border-radius。其他的改变取决于你的意见和设计，这可以很容易地用一点css来完成。

参考：codyhouse.co

我认为一个简单的下拉列表会看起来最好。