タブ付きナビゲーション

Question

簡単なタブ付きナビゲーションを再作成しようとしています。私の問題は、私はそれを一緒にコンテンツをドラッグせずにタブ自体を配置することはできないようであり、現在、私はタブ間を切り替えると、コンテンツは、親タブで保持するために左にシフトし続けます。

誰かがこれをまっすぐにする手助けをすることができますか？

HTML：

<header> 
     <ul class="tabs"> 
      <li class="tabs-page"> 
       <input type="radio" name="tab" id="personalInformation" checked /> 
       <label for="personalInformation">Personal Information</label> 
       <div class="content"> 
        <p>Content for Personal Information will go here!</p> 
        <p>And some more content will go here!</p> 
       </div> 
      </li> 
     </ul> 


      <li class="tabs-page"> 
       <input type="radio" name="tab" id="teachingQualifications"/> 
       <label for="teachingQualifications">Teaching Qualifications</label> 
       <div class="content"> 
        <p>Content for Teaching Qualifications will go here!</p> 
        <p>And some more content will go here!</p> 
       </div> 
      </li> 
     </ul> 


      <li class="tabs-page"> 
       <input type="radio" name="tab" id="expensesInformation"/> 
       <label for="expensesInformation">Personal Expenses</label> 
       <div class="content"> 
       <p>And some more content will go here!</p> 
       </div> 
      </li> 
     </ul> 
    </header> 

CSS：名前clearfixと

body 
{ 
    margin-left: 0; 
    margin-top: 0; 
} 

#formStyle10 
{ 
    height: 600px; 
    width: 500px; 
    background-color: white; 
    box-shadow: rgb(128, 128, 128) 2px 2px 2px, -2px -2px 2px rgb(128, 128, 128); 
    border-radius: 10px; 
    margin: 30px auto; 
} 

header 
{ 
    height: 65px; 
    width: 500px; 
    background-color: white; 
    border-top-left-radius: 10px; 
    border-top-right-radius: 10px; 
    border: 1px solid; 
} 

input[name="tab"] 
{ 
    display:none; 
} 

    input[name="tab"] ~ .content 
    { 
     display:none; 
    } 

    input[name="tab"]:checked ~ .content 
    { 
     display: block; 
    } 

    input[name="tab"]:checked ~ label 
    { 
     background: #ccc; 
    } 

.tabs-page 
{ 
    list-style: none; 
} 





.tabs-page > label 
{ 
    padding: 5px; 
    border-top-left-radius: 5px; 
    height: 35px; 
    border-top-right-radius: 5px; 
    border: 1px solid #2795EE; 
    width: 90px; 
    text-align: center; 
    float: left; 
    list-style: none; 

} 

.content 
{ 
    position: absolute; 
    top: 200px; 
    left: 200px; 
} 

Answer 1

使用 クラス

.clearfix {

クリア：両方;

}

場所のコンテンツの途中でのdivとクラスとナビゲーションバー

あなたはここにコードシェアを持っている場合、私はそれを修正します。