div+css怎么实现横向滚动条代码

html代码部分

<div class="nav_wrap">
<ul class="nav_mine">
<li class="nav_item">全部</li>
<li class="nav_item">Adobe</li>
<li class="nav_item">微软</li>
<li class="nav_item">会计</li>
<li class="nav_item">绘画</li>
<li class="nav_item">Adobe</li>
<li class="nav_item">微软</li>
<li class="nav_item">会计</li>
<li class="nav_item">绘画</li>
</ul>
</div>
<script src="../jQuery/tmp/jquery.js"></script>

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的宽度
})

给TA打赏
共{{data.count}}人
人已打赏
网站知识

css字体fontweight的作用是什么

2023-11-27 9:40:27

网站知识

css3按钮呼吸效果和代码

2023-11-27 15:41:25

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧