html - 如何让两个 Foundation 菜单并排？

Question

我无法通过 Foundation 类找到正确的技巧，让我的两个菜单(两个 <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 是 block 级的，默认情况下它占用整行可用，两个 ul 元素表示两行。有很多方法可以改变它，例如:

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

或

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

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