实现移动设备上的横向菜单滚动条功能

咱们在手机上常常能看到这样一种菜单，能横向滚动。

实现它并不难，只须要用到 Flexbox 布局。

HTML 结构：

<div class="nav-scroller">
  <nav class="nav d-flex justify-content-between">
    <a class="p-2 text-muted" href="#">World</a>
    <a class="p-2 text-muted" href="#">U.S.</a>
    <a class="p-2 text-muted" href="#">Technology</a>
    <a class="p-2 text-muted" href="#">Design</a>
    <a class="p-2 text-muted" href="#">Culture</a>
    <a class="p-2 text-muted" href="#">Business</a>
    <a class="p-2 text-muted" href="#">Politics</a>
    <a class="p-2 text-muted" href="#">Opinion</a>
    <a class="p-2 text-muted" href="#">Science</a>
    <a class="p-2 text-muted" href="#">Health</a>
    <a class="p-2 text-muted" href="#">Style</a>
    <a class="p-2 text-muted" href="#">Travel</a>
  </nav>
</div>
复制代码

CSS 样式：

html, body {
  margin: 0;
  font: 16px/2 'Trebuchet MS';
}

.d-flex {
  display: flex;
}

.justify-content-between {
  justify-content: space-between;
}

.p-2 {
  padding: 0.5rem;
}

.text-muted {
  color: #8a8a8a;
}

.nav a {
  text-decoration: none;
}

.nav a:hover {
  color: #333;
}

.nav-scroller {
  max-width: 480px;
  margin: 0 auto;
  height: 3rem;
  overflow-y: hidden;
}

.nav {
  overflow-x: auto;
  background: #dbdbdb;
}
复制代码

（完）