首页 > Web开发 > 详细

[CSS3] Make a horizontal-scrolling Menu

时间:2018-06-17 12:20:34      阅读:204      评论:0      收藏:0      [点我收藏+]


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

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!