html - 导航栏溢出

Question

我正在尝试从数据库动态创建导航栏，以适应将来向网站添加类别。因此导航栏的水平空间在未来是不够的。

目标是有一个可滚动的导航栏，可通过两侧的两个按钮滚动。我想做的是有一行导航项，所以一种水平溢出。我试过这样做，但似乎不起作用。

我在整行中使用了 flexbox。这是否会以任何方式限制我在导航栏上获得溢出？

如何获得可与侧边按钮一起使用的水平滚动导航栏？

li {
  float: left;
  display: block;
  margin-left: 10px;
  font-size: 15px;
}

#flexbox_nav {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  height: 60px;
}

#lscroll_but {
  flex-grow: 1;
}

#head_nav {
  flex-grow: 15;
  flex-flow: row nowrap;
  line-height: 20px;
  display: inline-flex;
  vertical-align: middle;
}

#rscroll_but {
  flex-grow: 1;
}

<div id="containing_div">
  <header>
    <div id="flexbox_nav">
      <button id="lscroll_but">LEFT</button>
      <nav id="head_nav">
        <ul>
          <li><a>HOME</a></li>
          <li><a>ONEZERO</a></li>
          <li><a>ELEMENTAL</a></li>
          <li><a>GEN</a></li>
          <li><a>ZORA</a></li>
          <li><a>FORGE</a></li>
          <li><a>HUMAN PARTS</a></li>
          <li><a>STARTUPS</a></li>
          <li><a>SELF</a></li>
          <li><a>TECH</a></li>
          <li><a>HEATED</a></li>
          <li><a>MODUS</a></li>
          <li><a>MORE</a></li>
          <li><a>STARTUPS</a></li>
          <li><a>SELF</a></li>
          <li><a>TECH</a></li>
          <li><a>HEATED</a></li>
          <li><a>MODUS</a></li>
          <li><a>MORE</a></li>
        </ul>
      </nav>
      <button id="rscroll_but">RIGHT</button>
    </div>
  </header>
</div>

Answer 1

是这样的吗？

* {
  box-sizing: border-box;
}

#flexbox_nav {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  height: 60px;
  /* max-width: 100%; */
}

#lscroll_but {
  /* flex-grow: 1; */
}

#head_nav {
  /* flex-grow: 15; */
  /* flex-flow: row nowrap; */
  /* line-height: 20px; */
  /* display: inline-flex; */
  /* vertical-align: middle; */
  /* max-width: 100%; */
  display: flex;
  overflow: auto;
}

#rscroll_but {
  /* flex-grow: 1; */
}

.nav-list {
  display: flex;
  /* overflow: auto; */
  max-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-list li {
  flex-shrink: 0;
  /* float: left; */
  /* display: block; */
  margin-left: 10px;
  font-size: 15px;
}

<div id="containing_div">
  <header>
    <div id="flexbox_nav">
      <button id="lscroll_but">LEFT</button>
      <nav id="head_nav">
        <ul class="nav-list">
          <li><a>HOME</a></li>
          <li><a>ONEZERO</a></li>
          <li><a>ELEMENTAL</a></li>
          <li><a>GEN</a></li>
          <li><a>ZORA</a></li>
          <li><a>FORGE</a></li>
          <li><a>HUMAN PARTS</a></li>
          <li><a>STARTUPS</a></li>
          <li><a>SELF</a></li>
          <li><a>TECH</a></li>
          <li><a>HEATED</a></li>
          <li><a>MODUS</a></li>
          <li><a>MORE</a></li>
          <li><a>STARTUPS</a></li>
          <li><a>SELF</a></li>
          <li><a>TECH</a></li>
          <li><a>HEATED</a></li>
          <li><a>MODUS</a></li>
          <li><a>MORE</a></li>
        </ul>
      </nav>
      <button id="rscroll_but">RIGHT</button>
    </div>
  </header>
</div>