码农公社 210是何含义？10月24日是程序员节，1024 =210、210既
210
之意。
实现导航栏上的横向滚动条以显示更多的栏目项。
有两种实现方式：css+js实现、flex实现。
两种方法各有所长，如果不考虑兼容性问题，还是用flex吧，毕竟：Write Less，Do More。
html：
.cn210.cx210.mn177.xyz168.wangzhi.info
一 原始css + jquery 实现横向滚动条(原生js可以实现，为了方便才用的jQuery)
css：
*{
box-sizing:border-box;
margin:0;
padding:0
}
.nav_wrap{
overflow-x:scroll;
}
.nav_mine{
padding:15px10px;
border-bottom:1pxsolid#aca9a7;
height:75px;
overflow-x:scroll;
overflow-y:hidden;
}
.nav_mine.nav_item{
border:1pxsolid#1a110b;
border-radius:40px;
color:#aca9a7;
margin-right:10px;
font-size:24px;
padding:4px18px;
float:left;
list-style:none;
}
js代码：
$(function(){
varwidth=0;
for(leti=0;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:15px20px;
border-bottom:1pxsolid#aca9a7;
height:75px;
display:flex;
align-items:center;
overflow-y:hidden;
flex-wrap:nowrap;
}
.nav_mine.nav_item{
border:1pxsolid#aca9a7;
border-radius:40px;
color:#aca9a7;
margin-right:22px;
font-size:24px;
padding:4px18px;
list-style:none;
white-space:nowrap;
}
对于white-space，item在没有用white-space:nowrap时，发现一个问题，在未设定宽度的情况下，一个单词不会换行，而汉字会换行，认为是和display:flex有关系。
上网查阅，才知道：white-space是看空格来识别是否换行的，单词是作为一个字符，所以要针对于汉字和英文，都要设置white-space:nowrap不换行。因为汉字和英文的不同，导致所占的宽度不一致，所以要留1到2个像素。
如果觉得《html设置导航随滚动条滚动条 导航栏横向滚动条的两种实现方法》对你有帮助，请点赞、收藏，并留下你的观点哦！
