コンテンツブロックの幅全体を占有するために各タブの幅を広げるにはどうすればよいですか？

Question

私はプログラミングやこのサイトへかなり新しいですが、私は、縦と横のタブに異なるコードを勉強してきたし、私はこの1つ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>