防止导航栏中的双行（MaterializeCSS）

Question

我想知道是否有一种方法可以调整MaterializeCSS 中的导航栏，以防止元素数量超过浏览器宽度时出现双行。我正在考虑一些可滚动的导航栏，例如选项卡：

但是我找不到实现它的方法。

Answer 1

从 nav-tabs 中汲取灵感，将此行为作为标准表现出来：

在 link 容器（本例中为 UL）上设置 nowrap、overflow 和 width。

nav ul { 
    white-space:nowrap;
    overflow-x: auto;
    width: 100%;
}

设置 display，并在 link 上取消设置 float（本例中为 LI）。

nav ul li { 
    display: inline-block;
    float: none;
}

Prevent double row in navbar (MaterializeCSS)