html - 标签式导航

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 的类放在内容和导航栏的中间

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