仅滚动标签 HTML 和 CSS

Question

我想知道是否有办法在不使用 JavaScript 的情况下创建滚动标签。我被分配了一项严格使用 HTML 和 CSS 的任务，仅此而已。下面的代码是我能找到的最好的解决方案，它可以在不使用 HTML 和 CSS 之外的任何其他东西的情况下创建选项卡。我找到了一些用于在线滚动标签的代码，但它再次使用 JavaScript。那么，是否可以仅使用 HTML 和 CSS 来滚动标签？有什么帮助，谢谢！

.tabs
{position: relative;   
min-height: 200px;
clear: both;
margin: 25px 0;}

.tab
{float: left;}

.tab label
{background: #eee; 
padding: 10px; 
border: 1px solid #ccc; 
margin-left: -1px;
cursor:pointer;
position: relative;
left: 1px; }

.tab [type=radio]
{display: none;}

.content {position: absolute;
top: 28px;
left: 0;
background: white;
height:100px;
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid #ccc;}

[type=radio]:checked ~ label
{background: white;
border-bottom: 1px solid white;
z-index: 2;}

[type=radio]:checked ~ label ~ .content
{z-index: 1;}

<div class="tabs">
   <div class="tab">
      <input name="tab-group-1" id="tab-1" type="radio"/>
      <label for="tab-1">Tab One</label>
      <div class="content">
         Content 1
      </div> 
   </div>
   <div class="tab">
      <input name="tab-group-1" id="tab-2" type="radio"/>
      <label for="tab-2">Tab Two</label>
      <div class="content"> Content 2 </div> 
   </div>
</div>

Answer 1

所以使用 JavaScript 可能会更好，但 CSS 中确实存在解决方案，如果您愿意允许对宽度和高度以及滚动条结束位置进行某些限制。

基本思想是让标签本身成为inline-block，并让它们的容器拥有overflow-x: auto。当标签太大时，这将在容器上放置一个水平滚动条。

也就是说，这要求容器具有固定大小，并且如果要将内容元素保留在每个选项卡的divs 中，则必须强制内容也具有固定大小。如果可以避免的话，我不会想以这种方式构建它，但这是一个纯 HTML 和 CSS 的解决方案。

一个可运行的 sn-p，源自您的原始版本，如下所示。我将容器上的宽度专门设置为300px，这样您就可以看到水平溢出的样子。

.tabs {
    position: relative;   
    min-height: 200px;
    clear: both;
    margin: 0;
    padding-top: 15px;
    width: 300px;
    white-space: nowrap;
    overflow-x: auto;
}

.tab {
    display: inline-block;
    vertical-align: top;
}

.tab label {
    background: #eee; 
    padding: 10px; 
    border: 1px solid #ccc; 
    margin-left: -1px;
    cursor:pointer;
    position: relative;
    left: 1px;
}

.tab [type=radio] {
    display: none;
}

.tab .content {
    position: fixed;
    white-space: normal;
    top: 50px;
    left: 0;
    background: white;
    height: 100px;
    right: 0;
    bottom: 0;
    padding: 20px;
    width: 266px;
    border: 1px solid #ccc;
}

.tab [type=radio]:checked ~ label {
    background: white;
    border-bottom: 1px solid white;
    z-index: 2;
}

.tab [type=radio]:checked ~ label ~ .content {
    z-index: 1;
}

<div class="tabs">
   <div class="tab">
      <input name="tab-group-1" id="tab-1" type="radio"/>
      <label for="tab-1">Tab One</label>
      <div class="content">
         Content 1
      </div> 
   </div>
   <div class="tab">
      <input name="tab-group-1" id="tab-2" type="radio"/>
      <label for="tab-2">Tab Two</label>
      <div class="content"> Content 2 </div> 
   </div>
   <div class="tab">
      <input name="tab-group-1" id="tab-3" type="radio"/>
      <label for="tab-3">Tab Three</label>
      <div class="content"> Content 3 </div> 
   </div>
   <div class="tab">
      <input name="tab-group-1" id="tab-4" type="radio"/>
      <label for="tab-4">Tab Four</label>
      <div class="content"> Content 4 </div> 
   </div>
</div>

更新：根据请求，这是一种将水平滚动条夹在选项卡和内容之间的方法。请记住，这甚至比上述解决方案hackier，确实滥用了溢出和高度控制，但它是可行的。只是不要尝试在内容 div 下方放置任何内容，因为那肯定不会奏效。

.tabs {
    position: relative;   
    clear: both;
    margin: 0;
    padding-top: 15px;
    width: 300px;
    height: 45px;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}

.tab {
    display: inline-block;
    vertical-align: top;
}

.tab label {
    background: #eee; 
    padding: 10px; 
    border: 1px solid #ccc; 
    margin-left: -1px;
    cursor:pointer;
    position: relative;
    left: 1px;
}

.tab [type=radio] {
    display: none;
}

.tab .content {
    position: fixed;
    white-space: normal;
    top: 70px;
    left: 0;
    background: white;
    height:100px;
    right: 0;
    bottom: 0;
    padding: 20px;
    width: 266px;
    border: 1px solid #ccc;
 }

.tab [type=radio]:checked ~ label {
    background: white;
    border-bottom: 1px solid white;
    z-index: 2;
}

.tab [type=radio]:checked ~ label ~ .content {
    z-index: 1;
}

<div class="tabs">
   <div class="tab">
      <input name="tab-group-1" id="tab-1" type="radio"/>
      <label for="tab-1">Tab One</label>
      <div class="content">
         Content 1
      </div> 
   </div>
   <div class="tab">
      <input name="tab-group-1" id="tab-2" type="radio"/>
      <label for="tab-2">Tab Two</label>
      <div class="content"> Content 2 </div> 
   </div>
   <div class="tab">
      <input name="tab-group-1" id="tab-3" type="radio"/>
      <label for="tab-3">Tab Three</label>
      <div class="content"> Content 3 </div> 
   </div>
   <div class="tab">
      <input name="tab-group-1" id="tab-4" type="radio"/>
      <label for="tab-4">Tab Four</label>
      <div class="content"> Content 4 </div> 
   </div>
</div>

Answer 2

这可以通过将标签移动到单独的div 并使用focus hack 来突出显示选项卡来完成。这是一个有效的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: 0;
        }

        .labels
        {
            overflow-y: auto;
            white-space: nowrap;
        }

        .labels .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-panel
        {
            position: fixed;
            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;
        }

        span:focus
        {
            outline: none;
        }

        span:focus > .tab-label
        {
            background: white;
        }

        .tabs .tab [type="radio"]:checked ~ .tab-panel
        {
            display: inline;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="labels">
            <span tabindex="0">
                <label class="tab-label" for="tab-tab1">Tab Caption 1</label>
            </span>
            <span tabindex="0">
                <label class="tab-label" for="tab-tab2-0">Tab Caption 2</label>
            </span>
            <span tabindex="0">
                <label class="tab-label" for="tab-tab2-1">Tab Caption 3</label>
            </span>
            <span tabindex="0">
                <label class="tab-label" for="tab-tab2-2">Tab Caption 4</label>
            </span>
            <span tabindex="0">
                <label class="tab-label" for="tab-tab2-3">Tab Caption 5</label>
            </span>
            <span tabindex="0">
                <label class="tab-label" for="tab-tab2-4">Tab Caption 6</label>
            </span>
            <span tabindex="0">
                <label class="tab-label" for="tab-tab2-5">Tab Caption 7</label>
            </span>
            <span tabindex="0">
                <label class="tab-label" for="tab-tab2-6">Tab Caption 8</label>
            </span>
            <span tabindex="0">
                <label class="tab-label" for="tab-tab2-7">Tab Caption 9</label>
            </span>
            <span tabindex="0">
                <label class="tab-label" for="tab-tab2-8">Tab Caption 10</label>
            </span>
        </div>
        <div class="tabs">
            <div class="tab">
                <input class="tab-radio" type="radio" id="tab-tab1" name="tabs-main" checked>
                <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">
                <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">
                <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">
                <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">
                <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">
                <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">
                <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">
                <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">
                <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">
                <div class="tab-panel">
                    <div class="tab-content">
                        <h2>Tab 10</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

Answer 3

HTML 和 CSS 不能滚动。只有 JavaScript。如果要在 DIV 中滚动：HTML: How to create a DIV with only vertical scroll-bars for long paragraphs?