uikit - wie man eine lange Liste von Tabs in den Überlauf statt unter

Question

macht

So jetzt gerade, wenn ich eine lange Liste von Registerkarten haben, anstatt Überlauf und Erstellen einer Bildlaufleiste, hängt nur die neuen Registerkarten darunter, Stapeln sie auf übereinander. Ich mag diesen Entwurf nicht und ich frage mich, ob es einen Weg gibt, sie zu überschwemmen.

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

Geben flex-wrap: nowrap und max-width-#tabs, wie:

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

Werfen Sie einen Blick auf das Snippet unten:

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>

Hoffe, das hilft!