實現移動設備上的橫向菜單滾動條功能

咱們在手機上常常能看到這樣一種菜單，能橫向滾動。

實現它並不難，只須要用到 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;
}
複製代碼

（完）