Навигация С Вкладками

Я пытаюсь воссоздать простую навигацию с вкладками. Моя проблема, кажется, заключается в том, что я не могу расположить сами вкладки без перетаскивания содержимого вместе с ним, и в настоящее время, когда я переключаюсь между вкладками, содержимое продолжает смещаться влево, чтобы сохранить его родительскую вкладку.

Сможет ли кто-нибудь помочь мне это исправить?

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;
}

1 ответ

  1. Использовать
    класс с именем clearfix

    .clearfix{

    ясно: оба;

    }

    разместить класс с div в середине содержимого и навигационной панели

    если у вас есть общий код здесь, я это исправлю.