0
如何让滚动条直接出现在选项卡下方，并且仅适用于选项卡而不是内容？我的代码是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选项卡的问题。我不认为这是可能的。
这是一个结构化问题。你不能滚动不在同一父元素中的东西。您需要首先制作所有标签标题，然后制作正文元素 – wheeler
我希望不必完全重构所有内容，因为我的代码大部分时间都能正常工作。唯一存在问题的时间是标签太多的时候。 –