Wie man zwei Reihe von oben festes Menü in semantic-UI

Question

AS Titel, ich möchte das obere feststehende Menü haben zwei Reihen statt einer.

Hier ist was ich versucht habe.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.js"></script> 
 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.css"> 
 
<div class="ui top fixed inverted menu"> 
 
    <div class="ui container"> 
 
     <a class="item">Item</a> 
 
     <a class="item">Item</a> 
 
    </div> 
 
    <div class="ui container"> 
 
     <a class="item">Item</a> 
 
    </div> 
 
</div>

zweiten Behälter Ergebnis mit sowohl besetzen 50% der Breite. Mit column und grid funktioniert auch nicht (das Menü nicht mehr sein Layout). Es scheint eine einfache Frage zu sein. Jede Hilfe ist willkommen.

Answer 1

Ich versuche es einfach mit einem Display: Block, um Ihre Eltern div auf diese Weise zu erzwingen. Sieht funktioniert.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.js"></script> 
 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.css"> 
 
<div class="ui top fixed inverted menu" style="display:block"> 
 
    <div class="ui container"> 
 
     <a class="item">Item</a> 
 
     <a class="item">Item</a> 
 
    </div> 
 
    <div class="ui container"> 
 
     <a class="item">Item</a> 
 
    </div> 
 
</div>