css内容超出滚动条 横向滑动导航overflow

css属性 overflow：
overflow：visible 默认，超出显示
overflow：hidden 超出范围隐藏
overflow：scroll 范围内容带滚动条
overflow：auto 范围内容若超出带滚动条

• 内容超出范围，出现滚动条 overflow:scroll/auto
  
• 横向滑动导航栏 overflow-x:scroll/auto
  
  横向滑动
  外层(div)，内层(ul) 。内层宽度包含全部内容且大于外层

  <div class="head_nav" style="overflow-x: scroll;width: 100%;">
     <ul style="width: max-content;padding: 0;">
  	 <li style="width: 60px;list-style: none;display: inline-block;"><a>首页</a></li>
  	 <li style="width: 60px;list-style: none;display: inline-block;"><a>111</a></li>                                                                                                                                                                                        
  	 <li style="width: 60px;list-style: none;display: inline-block;"><a>222</a></li>
  	 <li style="width: 60px;list-style: none;display: inline-block;"><a>333</a></li>
  	 <li style="width: 60px;list-style: none;display: inline-block;"><a>444</a></li>
  	 <li style="width: 60px;list-style: none;display: inline-block;"><a>555</a></li>
  	 <li style="width: 60px;list-style: none;display: inline-block;"><a>666</a></li>
     </ul>
  </div>