如何让两个 Foundation 菜单并排？

Question

我无法通过 Foundation class 找出正确的技巧，让我的两个菜单（两个 <ul> 结构）在同一行上彼此相邻。

这是一个 CodePen：https://codepen.io/pnoeric/pen/yvgOOv/

<div class="top-bar" id="responsive-menu">
    <div class="top-bar-left">
        <a class="title-bar-title" href="#">
            Site Title Goes Here
        </a>
    </div>
    <div class="top-bar-right">
        <ul class='menu align-right'>
            <li>One</li>
            <li>Two</li>
            <li>Three</li>
        </ul>
        <ul class='menu align-right'>
            <li>Menu 2 One</li>
            <li>Menu 2 Two</li>
            <li>Menu 2 Three</li>
        </ul>
    </div>
</div>

Answer 1

由于ul是块级别，默认情况下它占用整行可用，两个ul元素表示两行。有很多方法可以改变它，例如：

.top-bar-right {
  display: flex;
}

或

.top-bar-right ul {
  display: inline-block;
}

看起来框架将 li 设置为浮动，否则需要重置为。

如何让两个 Foundation 菜单并排？

How to get two Foundation menus next to each other?

html

css

zurb-foundation