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

【问题标题】：How do I increase the width of each tab in order for them to occupy the whole width of the content block?如何增加每个选项卡的宽度以使它们占据内容块的整个宽度？
【发布时间】：2017-11-01 22:05:12
【问题描述】：

我对编程和这个网站还很陌生，但我一直在研究垂直和水平标签的不同代码，我想问一个关于这个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？

【问题讨论】：

标签： html css tabs width

【解决方案1】：

首先看看你的body padding这么高。

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

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%;
}

【讨论】：

【解决方案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>

【讨论】：