给 li 设置固定宽度，随着 li 的增多，宽度失效，li 被压缩变小

<div class="menu-second">
  <ul>
    <li class="active"><a href="#">水环境</a></li>
    <li><a href="#">大气环境</a></li>
    <li><a href="#">自然生态</a></li>
    <li><a href="#">土壤环境</a></li>
    <li><a href="#">企业污染</a></li>
    <li><a href="#">气候变化</a></li>
  </ul>
</div>

• 最初，为了实现上图效果，我的想法：
• 给 ul 设置了固定宽度 width: 600px，overflow: hidden
• 给 li 设置了固定宽度 width: 100px

• ---

  这个想法不行，实际效果是：随着 li 的增多，li 被压缩了，没有出现滚动条

• 为了防止 li 被压缩，我给 li 设置了最小宽度：
• min-width:100px，强制 li 的最小宽度不会改变

• ---

  新的问题：
• .menu-second（ul 外层的 div） 含有 padding
• 如果给 li 设置了最小宽度，随着 li 的增多，li 不会变形了
• 但是 ul 也会被无线扩大，ul 的溢出隐藏失去作用，ul 外层的 div padding 自动失效，即使设置 ul 的 min-width 也没用

• ---

  不建议给 ul 设置滚动条，也不建议给 .menu-second 设置滚动条（因为他有 padding，容易导致很多问题）

• ---

  解决方案：
• 在 ul 和 .menu-second 之间，单独添加一层 div，用于处理滚动条

<div class="menu-second">
  <!-- 这个div只用于控制滚动条，需要设置溢出隐藏，以及滚动条 -->
  <div class="ul-scroll">
    <ul>
      <li class="active"><a href="#">水环境</a></li>
      <li><a href="#">大气环境</a></li>
      <li><a href="#">自然生态</a></li>
      <li><a href="#">土壤环境</a></li>
      <li><a href="#">企业污染</a></li>
      <li><a href="#">气候变化</a></li>
    </ul>
  </div>
</div>

<style>
  .menu-second {
    width: 620px;
    height: 58px;
    /* padding 导致 .menu-second 不适合设置滚动条 */
    padding: 0 10px;
    background: url(../img/map/menu-second-outer-box.png) no-repeat;
  }

  /* 仅用于设置滚动条作用的 div */
  .ul-scroll {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    /* 为了滚动条不贴到底部 */
    margin-top: 4px;
    overflow-y: hidden;
    overflow-x: auto;
  }

  /* ul 标签不适合添加滚动条 */
  .menu-second ul {
    width: 100%;
    display: flex;
  }

  .menu-second ul li {
    /* li 需要设置最小宽度 */
    min-width: 100px;
    height: 38px;
  }
</style>