如何将两个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是块级别，因此默认情况下整个行都可用，而两个ul元素表示两行。有很多方法可以改变它，例如：

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

或

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

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