码农公社 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个像素。