標籤導航

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：

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

.clearfix {

明確：兩者;

}

地方類格在內容和導航欄

的中間，如果你有代碼共享這裏，我會解決它。