我有一个带有几个 li 标签的导航栏,当屏幕尺寸较小时,这些标签会相互重叠。我希望导航栏在较小的设备屏幕上保持相同的高度并水平滚动,但我正在尝试的一切都不起作用。请有人能指出这里出了什么问题!
HTML:
<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>
关于html - 如何让导航菜单栏水平滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43820007/