Kung paano gumawa: horizontal scrollable menu

Pag-aralan kung paano gamitin ang CSS upang gumawa ng horizontal scrollable menu.

Home News Contact About Support Blog Tools Base Custom More Logo Friends Partners People Work

亲自试一试

Kung paano gumawa ng horizontal scrollable menu

Unang hakbang - Magdagdag ng 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>

Ikalawa na hakbang - Magdagdag ng CSS:

Ang teknika upang gumawa ng scrollable navigation bar ay gumamit ng overflow:auto at 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 导航栏