让 <a href=> 列表在同一行中滚动和溢出

Question

我有一些想要滚动的标题，我添加了溢出自动&空白区现在rap，但它不起作用，我不知道该怎么办。

我正在尝试创建一些包含内容的标题，这样我就可以创建一些指向网站特定部分的超链接。我认为所有的代码和超链接的所有部分都完成了，这样我就可以从另一个页面访问页面的特定部分(例如Header2(，但我遇到了问题，因为所有内容都在同一行(特别是移动设备(

这就是Headers现在的样子：！https://ibb.co/xhtXHF4

这就是我希望页眉的样子，有一个滚动条，但都在同一行：！https://ibb.co/DLyzN0J

现在我在代码中添加了溢出：auto&空白：现在，但它不起作用，我不知道如何将所有页眉都放在同一行，并在行太小时使用滚动条。

有什么建议吗？

<script type="text/javascript">

$(document).ready(function() {
$('a').click(function() {
$('#url').html($(this).prop('href'));
});
});
</script>

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.pentaho-rounded-panel-bottom-lr {
display: none;
overflow: auto;
white-space: nowrap;
}
div.pentaho-rounded-panel-bottom-lr .pentaho-rounded-panel-bottom-lr {
display: block;
}
:target {
display: block !important;
}
a:link, a:visited{
background-color: #E1AFB3;
color: #030303;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover {
background-color: #C3414D;
}
</style>

<a href="#Header1">Header1</a>
<a href="#Header2">Header2</a>
<a href="#Header3">Header3</a>
<a href="#Header4">Header4</a>
<div id="Header1" class="pentaho-rounded-panel-bottom-lr pentaho-shadow">
<div id="Header1" class="pentaho-rounded-panel-bottom-lr">
This is the content from Header 1
</div>
</div>
<div id="Header2" class="pentaho-rounded-panel-bottom-lr pentaho-shadow">
<div id="Header2" class="pentaho-rounded-panel-bottom-lr">
This is the content from Header 2
</div>
</div>
<div id="Header3" class="pentaho-rounded-panel-bottom-lr pentaho-shadow">
<div id="Header3" class="pentaho-rounded-panel-bottom-lr">
This is the content from Header 3
</div>
</div>
<div id="Header4" class="pentaho-rounded-panel-bottom-lr pentaho-shadow">
<div id="Header4" class="pentaho-rounded-panel-bottom-lr">
This is the content from Header 4
</div>
</div>

感谢大家抽出时间

Answer 1

您可以将所有标题div封装在一个div中，并将其样式如下：

#Headers {
width: 600px; //example
display: flex;
flex-direction: row;
flex-wrap: no-wrap;
overflow-x: scroll;
}

<div id="Headers">
<div id="Header1" class="pentaho-rounded-panel-bottom-lr pentaho-shadow">
<div id="Header1" class="pentaho-rounded-panel-bottom-lr">
This is the content from Header 1
</div>
</div>
<div id="Header2" class="pentaho-rounded-panel-bottom-lr pentaho-shadow">
<div id="Header2" class="pentaho-rounded-panel-bottom-lr">
This is the content from Header 2
</div>
</div>
<div id="Header3" class="pentaho-rounded-panel-bottom-lr pentaho-shadow">
<div id="Header3" class="pentaho-rounded-panel-bottom-lr">
This is the content from Header 3
</div>
</div>
<div id="Header4" class="pentaho-rounded-panel-bottom-lr pentaho-shadow">
<div id="Header4" class="pentaho-rounded-panel-bottom-lr">
This is the content from Header 4
</div>
</div>
</div>