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
我希望不必完全重構所有內容，因爲我的代碼大部分時間都能正常工作。唯一存在問題的時間是標籤太多的時候。 –