滚动标签仅HTML和CSS [英] Scrolling tabs HTML and CSS only

问题描述

我想知道是否仍然可以在不使用JavaScript的情况下创建滚动标签。我被分配了一项严格使用HTML和CSS的任务。下面的代码是我可以找到的创建选项卡的最佳解决方案，该选项卡无需使用HTML和CSS即可。我找到了一些用于在线滚动标签的代码，但同样使用了JavaScript。因此，是否可以仅使用HTML和CSS来滚动选项卡？

I was wondering if there is anyway to create scrolling tabs without using JavaScript. I've been assigned a task to strictly use HTML and CSS, that's it. The code below is the best solution I could find to create tabs without using anything else besides HTML and CSS. I've found some code for scrolling tabs online, but again it uses JavaScript. So, is it possible to do scrolling tabs with just HTML and CSS? Anything helps, thanks!

.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>

推荐答案

因此使用JavaScript可能会更好，但是，如果您愿意在宽度和高度以及滚动条的最终位置上允许某些限制的话，CSS中确实存在解决方案。

So this would probably be better done using JavaScript, but a solution does exist in CSS, if you're willing to allow certain constraints on widths and heights and where the scrollbar ends up.

基本思想是使标签页本身为内嵌块，并使其容器具有溢出- x：自动。当选项卡太大时，这将在容器上放置一个水平滚动条。

The basic idea is to make the tabs themselves be inline-block, and have their container have overflow-x: auto. That will put a horizontal scrollbar on the container when the tabs get too big.

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

That said, that requires the container to have a fixed size, and you have to force the content to have a fixed size too if you're going to keep the content elements inside each of the tabs' divs. I wouldn't want to build it this way if I could avoid it, but this is a pure HTML-and-CSS solution.

可运行的代码段，源自您的原始的，在下面。我将容器的宽度专门设置为 300px ，这样您就可以看到水平溢出的样子。

A runnable snippet, derived from your original, is below. I set the width on the container specifically to 300px so you can see what the horizontal overflow looks like.

.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>

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

Update: Per request, here's a way to have the horizontal scrollbar sandwiched between the tabs and the content. Bear in mind that this is even hackier than the above solution, really abusing overflow and height control, but it's doable. Just don't try to put anything below the content divs, because that definitely won't work well.

.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>

这篇关于滚动标签仅HTML和CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！