html代码

这里是套了三层

<div class="max_nav container mt-3">
    <ul class="overflow-auto">
        <li><a href="#"><i class="bi bi-house-fill"></i>首页</a></li>
        <li><a href="#"><i class="bi bi-house-fill"></i>品牌介绍</a></li>
        <li><a href="#"><i class="bi bi-house-fill"></i>品牌介绍</a></li>
        <li><a href="#"><i class="bi bi-house-fill"></i>品牌介绍</a></li>
        <li><a href="#"><i class="bi bi-house-fill"></i>品牌介绍</a></li>
        <li><a href="#"><i class="bi bi-house-fill"></i>品牌介绍</a></li>
        <li><a href="#"><i class="bi bi-house-fill"></i>品牌介绍</a></li>
    </ul>
</div>

css代码

最外层：overflow-x:auto;

第二层：white-space:nowrap;

内层块：display:inline-block; 不要用浮动，不然不生效

注意：overflow-auto是bootstrap的内含样式，关于滚动条的，即是：.overflow-auto {overflow: auto !important;}

.max_nav{width:100%;overflow-x:auto;}
.max_nav ul{padding:10px 0;white-space:nowrap;}
.max_nav li{width:80px;text-align:center;display:inline-block;}
.max_nav a{color:#666;font-size:.95rem}
.max_nav a i{color:#C2A36C;font-size:2rem;display:block}

.max_nav ul::-webkit-scrollbar {width:0px}/*去掉滚动条，必须配合overflow-auto*/

样式如下：（为了方便看，把滚动条显示了）