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>

希望这有帮助！

uikit - 如何使长标签列表进入溢出而不是下面

1 个答案: