[CSS3] Make a horizontal-scrolling Menu

标签：cas   case   20px   eal   children   elements   only   idt   color   

Our web app on desktop may use elements that use great deal of width. On many occasions we can’t simply turn these elements into columns so that they fit on a small screen. Such elements may not only fit inadequately on small screens, they could ruin the entire layout of our page if we’re not careful. In many cases, we can use a horizontal-scrolling menu to preserve the width, but keep it easily usable.

  <nav>
    <a href="">Home</a>
    <a href="">My Profile</a>
    <a href="">Favorites</a>
    <a href="">Links</a>
    <a href="">Tasks</a>
    <a href="">Promotions</a>
    <a href="">Settings</a>
  </nav>

nav {
  display: flex;
  overflow-x: auto; /*Allow children in nav can overflow in x direction*/
  -webkit-overflow-scrolling: touch; /*Let the scroll more smoothing*/
  margin: 10px 0;
}

a {
  margin-right: 20px;
  margin-bottom: 10px;
  white-space: nowrap;
}

[CSS3] Make a horizontal-scrolling Menu

标签：cas   case   20px   eal   children   elements   only   idt   color   

原文地址：https://www.cnblogs.com/Answer1215/p/9192502.html