Question

我对编程和这个网站很新，但我一直在研究垂直和水平标签的不同代码，我想问一下这个问题https://jsfiddle.net/eu81273/812ehkyf/：

基本上，我一直在尝试更改标签的宽度，以便它们占据下面内容块的整个宽度，但是我无法做到，我应该添加/更改什么？添加宽度：200px;在.tab或.tab标签中似乎不起作用。

.tabs {
  position: relative;   
  min-height: 200px; /* This part sucks */
  clear: both;
  margin: 35px 0 25px;
  background: white;
}

.tab {
  float: left;       
}

.tab label {
   background: #eee; 
   padding: 10px; 
   border: 1px solid #ccc; 
   margin-left: -1px; 
   position: relative;
   left: 1px; 
   top: -29px;
   -webkit-transition: background-color .17s linear;
}

如果对变更或补充提供详细解释，那将是很好的，所以我可以很好地理解它。找到了一种使用javascript的方法，但是，是否可以只使用css和html？

Answer 1

看你的身体填充的第一个是如此之高。

所以我认为你必须减少它。

body {
   background: #999;  
   padding: 20px 2px; 
}

.tabs {
  position: relative;   
  min-height: 200px; /* This part sucks */
  clear: both;
  margin: 35px 0 25px;
  background: white;
  width:100%;
}

Answer 2

您可以将标签宽度设置为 - 33％

  function openTab(tabId) {
        var i;
        var x = document.getElementsByClassName("tab");
        for (i = 0; i < x.length; i++) {
            x[i].style.display = "none";
        }
        document.getElementById(tabId).style.display = "block";
    }

<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>

<div class="w3-bar w3-black">
  <button class="w3-bar-item w3-button" onclick="openTab('TabA')">TabA</button>
  <button class="w3-bar-item w3-button" onclick="openTab('TabB')">TabB</button>
  <button class="w3-bar-item w3-button" onclick="openTab('TabC')">TabC</button>
</div>

<div id="TabA" class="w3-container tab">
 <input type="radio" id="tab-1" name="tab-group-1" checked>
       <label for="tab-1">Tab One</label>
       
       <div class="content">
           <p>Stuff for Tab One</p>
       </div> 
</div>

<div id="TabB" class="w3-container tab" style="display:none">
   <input type="radio" id="tab-2" name="tab-group-1">
       <label for="tab-2">Tab Two</label>
       
       <div class="content">
           <p>Stuff for Tab Two</p>
           
           <img src="http://placekitten.com/200/100">
       </div> 
</div>

<div id="TabC" class="w3-container tab" style="display:none">
 <input type="radio" id="tab-3" name="tab-group-1">
       <label for="tab-3">Tab Three</label>
     
       <div class="content">
           <p>Stuff for Tab Three</p>
           
           <img src="http://placedog.com/200/100">
       </div> 
</div>
<style> .w3-bar .w3-button{
    width:33.3%;
    }</style>

如何增加每个选项卡的宽度以使它们占据内容块的整个宽度？

2 个答案: