如何在语义ui中制作两行顶部固定菜单

时间:2017-11-24 09:41:35

标签: javascript css semantic-ui

AS标题,我希望顶部固定菜单有两行而不是一行。

这是我尝试过的。



<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>
&#13;
&#13;
&#13;

使用第二个容器导致两者占据50%的宽度。使用columngrid也无效(菜单不再维护其布局)。这似乎是一个简单的问题。欢迎任何帮助。

1 个答案:

答案 0 :(得分:3)

我只是尝试使用display:block来强制你的父div以这种方式显示。 看起来很有效。

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