标签导航

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 {

明确：两者;

}

地方类格在内容和导航栏

的中间，如果你有代码共享这里，我会解决它。