如何使用基础中的默认 class="menu" 滚动而不是下一行？

Question

我希望菜单可以在较小的屏幕（侧边或 x 轴）中滚动，而不是菜单项另起一行。

我尝试将 overflow-x 设置为自动并滚动。但是菜单还是另起一行。

<div style="padding-bottom: 1rem; overflow-x: auto; white-space: nowrap;">
  <ul class="menu">
    <li></li>
  </ul>
</div>

Answer 1

flexbox 和 overflow 的组合可以解决这个问题。将 overflow-x auto 放在菜单的包装上。然后你用 display flex 和 flex-flow row nowrap 设置 ul。此 nowrap 将确保您的菜单项不会相互跳转。

.scroll-menu {
  overflow-x: auto;
}

.scroll-menu ul {
  display: flex;
  flex-flow: row nowrap;
}

How to scroll instead of next line using the default class="menu" in foundation?