选项卡式导航

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｛

明确：两者皆有；

}

将div类放在内容和导航栏的中间

如果你在这里有代码共享，我会修复它。