如何获得一个导航菜单栏水平滚动

问题描述：

我有一个导航栏，有一些li标签，当它们在较小的屏幕尺寸下时，会落在彼此之下。我想要导航栏保持相同的高度，并在较小的设备屏幕上进行水平滚动，但是我尝试的所有内容都无法正常工作。请问有人可以照亮这里的错误！如何获得一个导航菜单栏水平滚动

HMTL：

<nav role="navigation" class="site-navigation main-navigation"> 
    <div class="menu"> 
    <ul> 
     <li class="page_item page-item-40"><a href="http://localhost/property_abba/for-sale/">Buy</a></li> 
     <li class="page_item page-item-41"><a href="http://localhost/property_abba/for-rent/">Rent</a></li> 
     <li class="page_item page-item-7"><a href="http://localhost/property_abba/sell/">Sell</a></li> 
     <li class="page_item page-item-9 current_page_item"><a href="http://localhost/property_abba/valuations/">Valuations</a></li> 
     <li class="page_item page-item-15"><a href="http://localhost/property_abba/property-management/">Property Management</a></li> 
     <li class="page_item page-item-11"><a href="http://localhost/property_abba/about-us/">About Us</a></li> 
     <li class="page_item page-item-13"><a href="http://localhost/property_abba/contact-us/">Contact Us</a></li> 
    </ul> 
    </div> 
</nav>

CSS：

@media screen and (max-width : 480px){ 
    div.menu ul { 
    display: inline-block; 
    max-height: 34px; 
    overflow: auto; 
    white-space: nowrap; 
    } 
    div.menu a { 
    display: inline-block; 
    text-align: center; 
    } 
}

不过这目前是行不通的。

答

水平滚动菜单移动

<style type="text/css"> 
    @media screen and (max-width : 480px){ 
     div.menu ul { 
     display: inline-block; 
     width: 85%; 
     display: inline-block; 
     padding-bottom:20px; 
     white-space: nowrap; 
     overflow-y: hidden; 
     overflow-x: scroll; 
     -webkit-overflow-scrolling: touch; 
     -ms-overflow-style: -ms-autohiding-scrollbar; 
     } 
     div.menu li { 
      display: inline-block; 
     } 
     div.menu li a { 
     text-align: center; 
     } 
    } 
    </style> 
    <nav role="navigation" class="site-navigation main-navigation"> 
     <div class="menu"> 
     <ul> 
      <li class="page_item page-item-40"><a href="http://localhost/property_abba/for-sale/">Buy</a></li> 
      <li class="page_item page-item-41"><a href="http://localhost/property_abba/for-rent/">Rent</a></li> 
      <li class="page_item page-item-7"><a href="http://localhost/property_abba/sell/">Sell</a></li> 
      <li class="page_item page-item-9 current_page_item"><a href="http://localhost/property_abba/valuations/">Valuations</a></li> 
      <li class="page_item page-item-15"><a href="http://localhost/property_abba/property-management/">Property Management</a></li> 
      <li class="page_item page-item-11"><a href="http://localhost/property_abba/about-us/">About Us</a></li> 
      <li class="page_item page-item-13"><a href="http://localhost/property_abba/contact-us/">Contact Us</a></li> 
     </ul> 
     </div> 
    </nav>

如何获得一个导航菜单栏水平滚动

相关推荐