水平滚动不显示酒吧

我想通过水平滚动来显示菜单列表。所以我写的代码如下：水平滚动不显示酒吧

.sub-menu { 
    overflow-x: scroll; 
    overflow-y: hidden; 
    white-space:nowrap; 
} 

.menu.navbar-nav li{ 
    width: 22%; 
    text-align: center; 
    display:inline-block; 
    vertical-align:top; 
}

但它是水平显示一个酒吧，但我想消失它。请参阅。

你能告诉我有人如何删除它。

HTML

<div class="mobile-menu temp-mobile-menu visible-xs"> 
<div class="sub-menu"> 
    <ul class="menu nav navbar-nav" id=""> 
     <li class="active"><a href="/bn" class="first leaf home active">Home</a></li> 
     <li><a href="/bn/tonic-doctor" class="leaf doctor">Doctor</a></li> 
     <li><a href="/bn/tonic-benefits" class="leaf benefits">Benefits</a></li> 
     <li><a href="/bn/packages" class="leaf packages">Packages</a></li> 
     <li><a href="/bn/health-topics" style="swiper-slide" class="last leaf স্বাস্থ্য-প্রসঙ্গ">স্বাস্থ্য প্রসঙ্গ</a></li> 
    </ul>  
</div> 
</div>

更新CSS

.mobile-menu { 
    overflow: hidden; 
} 
.sub-menu { 
    min-height: 44px; 
    white-space: nowrap; 
    overflow-x: scroll; 
} 
.menu.navbar-nav li { 
width: 22%; 
text-align: center; 
display: inline-block; 
vertical-align: top; 
}

来源

2017-03-06 StreetCoder

'溢出-X：隐藏; ' –

[隐藏HTML页面上的滚动条]可能的重复（http://stackoverflow.com/questions/3 296644 /隐藏滚动条在html页面） –

我会特别指出你[这个答案]（http://stackoverflow.com/a/25561646/2117156） –

overflow-x: scroll;意味着你的水平滚动条是可见的。

如果你想删除它，使用overflow-x: hidden;

顺便说一句，如果你想水平和垂直滚动条被隐藏，只需使用：overflow: hidden;

如果你想隐藏滚动条，但保持滚动功能，添加一个名为CSS class一个maindiv您div元素sub-menu和使用上面：

.maindiv{  
    overflow: hidden; 
} 

.sub-menu{ 
    width: 100%; 
    height: 100%; 
    overflow-x: scroll; 
    padding-bottom:20px; 
}

来源

2017-03-06 10:46:52

我想隐藏栏保留水平滚动 – StreetCoder

查看我更新的答案。 –

我按照你的说法做了，但它不起作用。我在我的问题中添加了html。 – StreetCoder

尝试改变overflow-x: scroll;到overflow-x: hidden;你.sub-menu类

编辑：这个类添加到CSS文件：

::-webkit-scrollbar { 
 
width: 0px; /* remove scrollbar space */ 
 
background: transparent; /* optional: just make scrollbar invisible */ 
 
}

Working JSFiddle example

来源

2017-03-06 10:47:47 Marco

我想隐藏栏保持横向滚动 – StreetCoder

如果你不能用@Koby Douek解答，你可以通过更新你的答案来显示html代码吗？ – Marco

我也更新了html – StreetCoder

水平滚动不显示酒吧

回答

相关问题