我试图在移动设备上的一行设置导航标签，让用户可以随意浏览。它在火狐或任何带有-moz-engine的浏览器上都能很好地运行，但在chrome或任何带有-webkit-engine的浏览器上却根本无法运行。
chrome和firefox上的截图
在chrome上没有显示滚动条在firefox上出现滚动条
下面是有问题的元素
我用的是bootstrap 3.3.7
下面是使用的CSS，使其位于一行并可滚动
.d-box {
display: -webkit-box;
display: -moz-box;
}
.overflow-x-scroll {
overflow-x: scroll;
overflow-y: hidden;
}
.cl-light-black {
color: #2c3f58;
}
您需要在菜单的列表中添加float:none；，如下所示。
null
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<style>
.d-box {
display: -webkit-box;
display: -moz-box;
}
.overflow-x-scroll {
overflow-x: scroll;
overflow-y: hidden;
}
.cl-light-black {
color: #2c3f58;
}
.nav-tabs>li {
float: none;
}
</style>
<div class="container">
<h3>Tabs</h3>
<ul class="nav nav-tabs cl-light-black d-box overflow-x-scroll">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
<li><a href="#">Menu 6</a></li>
<li><a href="#">Menu 7</a></li>
<li><a href="#">Menu 8</a></li>
</ul>
<br>
</div>
</body>
</html>