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

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

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>

最佳答案

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

希望这可以帮助！

关于html - uikit-如何使一长串的选项卡溢出而不是在下面，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47257021/