如何实现横向滚动条-创新互联
今天就跟大家聊聊有关如何实现横向滚动条，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。
公司主营业务：成都网站制作、网站设计、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。
创新互联公司是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。
创新互联公司推出
城东免费做网站回馈大家。
html：
全部
Adobe
微软
会计
绘画
Adobe
微软
会计
绘画
一 原始css + jquery 实现横向滚动条（原生js可以实现，为了方便才用的jQuery）
css：
* {
box-sizing: border-box;
margin: 0;
padding: 0
}
.nav_wrap{
overflow-x: scroll;
}
.nav_mine {
padding: 15px 10px;
border-bottom: 1px solid #aca9a7;
height: 75px;
overflow-x: scroll;
overflow-y: hidden;
}
.nav_mine .nav_item {
border: 1px solid #1a110b;
border-radius: 40px;
color: #aca9a7;
margin-right: 10px;
font-size: 24px;
padding: 4px 18px;
float: left;
list-style: none;
}js代码：
$(function(){
var width = 0;
for (let i = 0; i < $('.nav_item').length; i++) {
width += $('.nav_item').eq(i).outerWidth(true);
}
$('.nav_mine').width(width+20); //width只是内容的宽度，需要加上padding的宽度
})PS：为什么用js，是因为不知道tabs有多少个，不能把宽度写死，只能动态获取tabs的宽度，然后相加，获取总宽度，方便多次使用。outerWidth加上参数true，代表包含了padding+margin+border的宽度。
二 css3 -- flex
css:
* {
box-sizing: border-box;
}
.nav_mine {
padding: 15px 20px;
border-bottom: 1px solid #aca9a7;
height: 75px;
display: flex;
align-items: center;
overflow-y: hidden;
flex-wrap: nowrap;
}
.nav_mine .nav_item {
border: 1px solid #aca9a7;
border-radius: 40px;
color: #aca9a7;
margin-right: 22px;
font-size: 24px;
padding: 4px 18px;
list-style: none;
white-space: nowrap;
}看完上述内容，你们对如何实现横向滚动条有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联行业资讯频道，感谢大家的支持。
网页名称：如何实现横向滚动条-创新互联
文章起源：http://csdahua.cn/article/diegci.html
