html
<nav class="nav"> <ul class="tab-ul"> <li class="navbtn item">推荐</li> <li class="navbtn item"><a href="###">1111</a></li> <li class="navbtn item"><a href="###">2222</a></li> <li class="navbtn item"><a href="###">3333</a></li> <li class="navbtn item on"><a href="###">4444</a></li> <li class="navbtn item"><a href="###">5555</a></li> <li class="navbtn item"><a href="###">6666</a></li> </ul> </nav>
css
.nav {position: relative;height: 33px;padding: 0 10px;font-size: 0;white-space: nowrap;overflow: auto;scroll-behavior: smooth;width: 100%;margin: 0 auto;}
.nav .tab-ul {display: flex;display: -webkit-flex;}
.nav .navbtn {color: #777;padding: 8px 0px 10px;font-size: 15px;display: inline-block;flex: 0 0 14%;text-align: center;list-style: none;}
.nav .navbtn.on {font-weight: bold;color: #DE293A;font-size: 16px;padding: 8px 0px 9px;}js
<script>
$(function(){
var moveX = $('.on').position().left + $('.on').parent().scrollLeft();
var pageX = document.documentElement.clientWidth;
var blockWidth = $('.on').width();
var left = moveX - (pageX / 2) + (blockWidth / 2);
$(".nav").scrollLeft(left);
})
</script>效果图
