介绍 & lt; div 类=皀av_wrap"比;
,,,& lt; ul 类=皀av_mine"比;
,,,,,,,& lt; li 类=皀av_item"在全部& lt;/li>
,,,,,,,& lt; li 类=皀av_item"祝辞Adobe
,,,,,,,& lt; li 类=皀av_item"在微软& lt;/li>
,,,,,,,& lt; li 类=皀av_item"祝辞会计& lt;/li>
,,,,,,,& lt; li 类=皀av_item"在绘画& lt;/li>
,,,,,,,& lt; li 类=皀av_item"祝辞Adobe
,,,,,,,& lt; li 类=皀av_item"在微软& lt;/li>
,,,,,,,& lt; li 类=皀av_item"祝辞会计& lt;/li>
,,,,,,,& lt; li 类=皀av_item"在绘画& lt;/li>
,,,& lt;/ul>
& lt;/div>
https://www.yisu.com/zixun/& lt; script src=" node_modules/jQuery/tmp/jquery.js "> *, {
,,,box-sizing:, border-box;
,,,保证金:,0;
,,,填充:0
}
.nav_wrap {
,,,overflow-x:,滚动;
}
.nav_mine {
,,,填充:,15 px 10 px;
,,,边界底部:,1 px solid # aca9a7;
,,,身高:,75 px;
,,,overflow-x:,滚动;
,,,overflow-y:,隐藏;
}
.nav_mine .nav_item {
边境:,,,,1 px solid # 1 a110b;
,,,这个特性:,40像素;
,,,颜色:,# aca9a7;
,,,margin-right:, 10 px;
,,,字体大小:,24 px;
,,,填充:,4 px 18 px;
,,,:浮动,离开;
,,,list-style:,没有;
} $(函数(){
,,,var width =, 0;
,,,for (let 小姐:=,0;,小姐:& lt;,美元(& # 39;.nav_item& # 39;) . length;,我+ +),{
,,,,,,,width +=,美元(& # 39;.nav_item& # 39;) .eq (i) .outerWidth(真正的);
,,,}
,,,$ (& # 39;.nav_mine& # 39;) .width(宽+ 20);,,//宽度只是内容的宽度,需要加补上的宽度
}) *, {
,,,box-sizing:, border-box;
}
.nav_mine {
,,,填充:,15 px 20 px;
,,,边界底部:,1 px solid # aca9a7;
,,,身高:,75 px;
,,,显示:,flex;
,,,对齐项目:,中心;
,,,overflow-y:,隐藏;
,,,flex-wrap:, nowrap;}
}
.nav_mine .nav_item {
边境:,,,,1 px solid # aca9a7;
,,,这个特性:,40像素;
,,,颜色:,# aca9a7;
,,,margin-right:, 22 px;
,,,字体大小:,24 px;
,,,填充:,4 px 18 px;
,,,list-style:,没有;
,,,白色空间:,nowrap;}
}
今天就跟大家聊聊有关如何实现横向滚动条,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
<强> html:
<强>一原始css + jQuery实现横向滚动条(原生js可以实现,为了方便才用的jQuery)
css:
js代码:
PS:为什么用js,是因为不知道标签有多少个,不能把宽度写死,只能动态获取标签的宽度,然后相加,获取总宽度,方便多次使用.outerWidth加上参数正确,代表包含了填充+利润+边界的宽度。
<强>二css3 ,,flex
css:
看完上述内容,你们对如何实现横向滚动条有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注行业资讯频道,感谢大家的支持。
