Question

我正在尝试制作包含15个元素的导航菜单。元素必须具有相等的宽度（我使用nav-justified实现了这一点，但是当我调整窗口大小时，菜单会不断缩小（预期的行为），直到它停止并离开屏幕一个点。

代码（jsFiddle）：

<ul class="nav nav-justified flex-nowrap">
<li class="nav-item"><a class="nav-link">Item 1</a></li>
<li class="nav-item"><a class="nav-link">Item 2</a></li>
<li class="nav-item"><a class="nav-link">Item 3</a></li>
<li class="nav-item"><a class="nav-link">Item 4</a></li>
<li class="nav-item"><a class="nav-link">Item 5</a></li>
<li class="nav-item"><a class="nav-link">Item 6</a></li>
<li class="nav-item"><a class="nav-link">Item 7</a></li>
<li class="nav-item"><a class="nav-link">Item 8</a></li>
<li class="nav-item"><a class="nav-link">Item 9</a></li>
<li class="nav-item"><a class="nav-link">Item 10</a></li>
<li class="nav-item"><a class="nav-link">Item 11</a></li>
<li class="nav-item"><a class="nav-link">Item 12</a></li>
<li class="nav-item"><a class="nav-link">Item 13</a></li>
<li class="nav-item"><a class="nav-link">Item 14</a></li>
<li class="nav-item"><a class="nav-link">Item 15</a></li>
</ul>

Answer 1

如果您使用1px来展示min-width，则元素应该缩小更多

li, a {
   min-width: 1px;
}

还设置溢出到没有水平滚动

使导航中的所有导航项目具有相同的宽度并且不进行换行

1 个答案: