html - uikit - 如何使一长串选项卡溢出而不是在下面

Question

所以现在，如果我有一个很长的选项卡列表，它不会溢出并创建一个滚动条，它只是将新选项卡附加在下面，将它们堆叠在一起。我不喜欢这种设计，我想知道是否有办法允许/强制它们溢出。

for (let i = 0; i < 20; i++)
{
  $("#tabs").append(`
    <li><a href="">test</a></li>
  `);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.34/js/uikit-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.34/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.34/css/uikit.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id='tabs' class="uk-tab" data-uk-tab="{connect:'#content'}" style="overflow-x: scroll; ">
</ul>

Answer 1

将 flex-wrap: nowrap 和 max-width 给 #tabs，比如:

#tabs {
  flex-wrap: nowrap;
  max-width: 10000px;
}

看看下面的片段:

for (let i = 0; i < 20; i++)
{
  $("#tabs").append(`
    <li><a href="">test</a></li>
  `);
}

#tabs {
  flex-wrap: nowrap;
  max-width: 10000px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.34/js/uikit-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.34/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.34/css/uikit.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id='tabs' class="uk-tab" data-uk-tab="{connect:'#content'}" style="overflow-x: scroll; ">
</ul>

希望这对您有所帮助!