介绍 & lt; div类=皀av_wrap"比;
& lt; ul类=皀av_mine"祝辞
& lt;李类=皀av_item"祝辞全部& lt;/li>
& lt;李类=皀av_item"祝辞Adobe
& lt;李类=皀av_item"祝辞微软& lt;/li>
& lt;李类=皀av_item"祝辞会计& lt;/li>
& lt;李类=皀av_item"祝辞绘画& lt;/li>
& lt;李类=皀av_item"祝辞Adobe
& lt;李类=皀av_item"祝辞微软& lt;/li>
& lt;李类=皀av_item"祝辞会计& lt;/li>
& lt;李类=皀av_item"祝辞绘画& lt;/li>
& lt;/ul>
& lt;/div>
https://www.yisu.com/zixun/& lt;脚本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固体# aca9a7;
身高:75 px;
overflow-x:滚动;
overflow-y:隐藏;
}
.nav_mine .nav_item {
边界:1 px固体# 1 a110b;
border - radius: 40像素;
颜色:# aca9a7;
margin-right: 10 px;
字体大小:24 px;
填充:4 px 18 px;
浮:左;
list-style:没有;
} $(函数(){
var宽度=0;
(让我=0;我& lt;美元(& # 39;.nav_item& # 39;) . length;我+ +){
宽度+=$ (& # 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固体# aca9a7;
身高:75 px;
显示:flex;
对齐项目:中心;
overflow-y:隐藏;
flex-wrap: nowrap;}
}
.nav_mine .nav_item {
边界:1 px固体# aca9a7;
border - radius: 40像素;
颜色:# aca9a7;
margin-right: 22 px;
字体大小:24 px;
填充:4 px 18 px;
list-style:没有;
空白:nowrap;}
}
这篇文章给大家分享的是有关css实现横向滚动条的案例的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。
html代码:
<强>
css代码:
js代码:
PS:为什么用js,是因为不知道标签有多少个,不能把宽度写死,只能动态获取标签的宽度,然后相加,获取总宽度,方便多次使用.outerWidth加上参数正确,代表包含了填充+利润+边界的宽度。
<强>
css代码:
对于空白,项目在没有用空白:nowrap时},发现一个问题,在未设定宽度的情况下,一个单词不会换行,而汉字会换行,认为是和显示:flex有关系,上网查阅,才知道:空白是看空格来识别是否换行的,单词是作为一个字符,所以要针对于汉字和英文,都要设置空白:nowrap不}换行。因为汉字和英文的不同,导致所占的宽度不一致,所以要留1到2个像素。
感谢各位的阅读!关于css实现横向滚动条的案例就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!
