这是移动 View 。链接 div 中的宽度为 100%。我想水平滚动这个 div 的内容而不滚动整个页面。下面是 html 代码。
<div class="links">
<ul>
<li>Home</li>
<li>Private Equity</li>
<li>Venture Capital</li>
<li>M&A</li>
<li>Markets</li>
<li>Industry</li>
<li>Economy</li>
</ul>
</div>
和CSS
.links{
width: 100%
ul{
padding:0px;
margin:0px;
@media only screen and (max-width : 480px){
white-space: nowrap;
}
}
ul li{
list-style-type: none;
display: inline-block;
padding:8px 30px;
text-transform: uppercase;
font-family: $roboto;
font-size: 20px;
font-weight: 300;
font-stretch: condensed;
line-height: 1;
border-right:1px solid #000;
&:last-child{
border-right:0px;
}
}
}
最佳答案
您只需要在您的 div 上添加一个 overflow-x: scroll
:https://jsfiddle.net/m5k5Lkm4/
另外,我不知道你用什么来加载你的 HTML,但如果它是原始 HTML,你将需要 & 在“M&A”中作为 HTML 实体进行转义。
关于jquery - 固定宽度 div 中的水平滚动内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39067443/