对于下面的示例代码，有人能帮助在小型设备上渲染时使按钮水平滚动吗？
我尝试了以下功能，但它们不起作用。看来标签需要特殊处理。我是HTML的新手，非常感谢您的帮助。
overflow: auto;
white-space: nowrap
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial;}
/* Style the tab */
.tab {
overflow: auto;
white-space: nowrap;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
</style>
</head>
<body>
<h2>Tabs</h2>
<p>Click on the buttons inside the tabbed menu:</p>
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'London')">London</button>
<button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
<button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
<button class="tablinks" onclick="openCity(event, 'Singapore')">Singapore</button>
<button class="tablinks" onclick="openCity(event, 'Mumbai')">Mumbai</button>
<button class="tablinks" onclick="openCity(event, 'Dubai')">Dubai</button>
</div>
</body>
</html>在这里，您可以像下面的代码一样使用display flex box来显示选项卡。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial;}
/* Style the tab */
.tab {
display: flex;
overflow: auto;
white-space: nowrap;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
@media (max-width: 520px) {
.tab {
display: flex;
overflow: auto;
white-space: nowrap;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
</style>
</head>
<body>
<h2>Tabs</h2>
<p>Click on the buttons inside the tabbed menu:</p>
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'London')">London</button>
<button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
<button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
<button class="tablinks" onclick="openCity(event, 'Singapore')">Singapore</button>
<button class="tablinks" onclick="openCity(event, 'Mumbai')">Mumbai</button>
<button class="tablinks" onclick="openCity(event, 'Dubai')">Dubai</button>
</div>
</body>
</html>您可以根据屏幕大小和要添加的样式添加更多媒体查询。请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
您需要设置主div的一些宽度，然后您需要提到要在其中搜索工具栏的轴。
width:400px;
overflow-x: auto;
您可以使用CSS媒体查询来根据屏幕大小确定要执行的操作。如果您只想滚动特定的屏幕大小(小型设备(，这一点非常重要。
@media (max-width: 600px) {
*This is for phones, for example (you might need to find more accurate pixel counts)*
}
您可以通过添加"；overflow-x：滚动"到带有按钮的元素。