どのように作成するか：水平にスクロール可能なメニュー

水平にスクロール可能なメニューを作成する方法

第一步 - HTML を追加する：

div.class="scrollmenu">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  ...
</div>

第二步 - CSS を追加する：

导航バーをスクロール可能にする方法は overflow:auto と white-space:nowrap を使用することです：

div.scrollmenu {
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
}
div.scrollmenu a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}
div.scrollmenu a:hover {
  background-color: #777;
}

직접 시도해보세요

관련 페이지

강의:CSS 네비게이션 패널