如何让滚动条直接显示在标签下方，仅适用于标签，而不是内容？
以下是JSFiddle中的代码。
<head>
<title>Test Page</title>
<style>
.wrapper {
width: 800px;
margin-left: auto;
margin-right: auto;
}
.tab-radio {
display: none;
}
.tabs {
font-size: 0;
margin: 10px 0;
overflow-y: auto;
white-space: nowrap;
}
.tabs:after {
clear: both;
content: '';
display: table;
}
.tabs .tab {
display: inline;
}
.tabs .tab-label {
background: #eee;
border: 1px solid #ccc;
display: inline-block;
font-size: 1rem;
left: 1px;
margin-left: -1px;
padding: 5px;
position: relative;
vertical-align: bottom;
}
.tabs .tab>[type="radio"] {
clip: rect(0 0 0 0);
height: 1px;
opacity: 0;
position: fixed;
width: 1px;
z-index: -1;
}
.tabs .tab-panel {
display: inline-block;
overflow: hidden;
position: relative;
height: 0;
width: 0;
}
.tabs .tab-content {
display: block;
float: left;
font-size: 1rem;
width: 100%;
white-space: normal;
overflow-y: visible;
}
.tabs .tab [type="radio"]:checked+.tab-label {
background: white;
padding-bottom: 5px;
z-index: 1;
}
.tabs .tab [type="radio"]:checked~.tab-panel {
display: inline;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="tabs">
<div class="tab">
<input class="tab-radio" type="radio" id="tab-tab1" name="tabs-main" checked>
<label class="tab-label" for="tab-tab1">Tab Caption 1</label>
<div class="tab-panel">
<div class="tab-content">
<h2>Tab 1</h2>
<p>A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text.
A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text.
A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text.
A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text.</p>
</div>
</div>
</div>
<div class="tab">
<input class="tab-radio" type="radio" id="tab-tab2-0" name="tabs-main">
<label class="tab-label" for="tab-tab2-0">Tab Caption 2</label>
<div class="tab-panel">
<div class="tab-content">
<h2>Tab 2</h2>
</div>
</div>
</div>
<div class="tab">
<input class="tab-radio" type="radio" id="tab-tab2-1" name="tabs-main">
<label class="tab-label" for="tab-tab2-1">Tab Caption 3</label>
<div class="tab-panel">
<div class="tab-content">
<h2>Tab 3</h2>
</div>
</div>
</div>
<div class="tab">
<input class="tab-radio" type="radio" id="tab-tab2-2" name="tabs-main">
<label class="tab-label" for="tab-tab2-2">Tab Caption 4</label>
<div class="tab-panel">
<div class="tab-content">
<h2>Tab 4</h2>
</div>
</div>
</div>
<div class="tab">
<input class="tab-radio" type="radio" id="tab-tab2-3" name="tabs-main">
<label class="tab-label" for="tab-tab2-3">Tab Caption 5</label>
<div class="tab-panel">
<div class="tab-content">
<h2>Tab 5</h2>
</div>
</div>
</div>
<div class="tab">
<input class="tab-radio" type="radio" id="tab-tab2-4" name="tabs-main">
<label class="tab-label" for="tab-tab2-4">Tab Caption 6</label>
<div class="tab-panel">
<div class="tab-content">
<h2>Tab 6</h2>
</div>
</div>
</div>
<div class="tab">
<input class="tab-radio" type="radio" id="tab-tab2-5" name="tabs-main">
<label class="tab-label" for="tab-tab2-5">Tab Caption 7</label>
<div class="tab-panel">
<div class="tab-content">
<h2>Tab 7</h2>
</div>
</div>
</div>
<div class="tab">
<input class="tab-radio" type="radio" id="tab-tab2-6" name="tabs-main">
<label class="tab-label" for="tab-tab2-6">Tab Caption 8</label>
<div class="tab-panel">
<div class="tab-content">
<h2>Tab 8</h2>
</div>
</div>
</div>
<div class="tab">
<input class="tab-radio" type="radio" id="tab-tab2-7" name="tabs-main">
<label class="tab-label" for="tab-tab2-7">Tab Caption 9</label>
<div class="tab-panel">
<div class="tab-content">
<h2>Tab 9</h2>
</div>
</div>
</div>
<div class="tab">
<input class="tab-radio" type="radio" id="tab-tab2-8" name="tabs-main">
<label class="tab-label" for="tab-tab2-8">Tab Caption 10</label>
<div class="tab-panel">
<div class="tab-content">
<h2>Tab 10</h2>
</div>
</div>
</div>
</div>
</div>
</body>
我正在寻找非JavaScript解决方案。感谢。
修改
我已经研究了构造标签的不同方法，以便标签与标签面板分开。这是一个example。不幸的是，这还不够，因为它使用了CSS文件中选项卡的ID。这是行不通的，因为有时会动态添加和删除选项卡，并且在不同的页面上使用相同的CSS文件。
一旦问题符合条件，我决定提供赏金。如果在此之前问题得到解决，我仍然会给予最佳答案赏金。
修改
我将不再提供赏金，因为我自己解决了这个问题，除非有人可以解决标签的问题，如果没有JavaScript就不会突出显示。我认为它甚至不可能。
答案 0 :(得分：0)
我设法通过将标签移动到单独的div并使用focus黑客突出显示标签来使其工作。唯一的缺点是，我仍然需要使用JavaScript来保持选中的选项卡突出显示，并在页面加载时选择第一个选项卡。
这是一个有效的JSFiddle。
我不能给自己的答案奖励，但是，如果有人设法让它在没有JavaScript的情况下正常工作，我将很乐意给予奖励。