如何实现多步骤表单导航的步骤名称交替上下布局？

当前多步骤表单导航中，步骤名称默认位于圆形计数器下方，需实现交替布局：第1步名称在计数器下方，第2步名称在计数器上方，以此类推循环至最后一步。

修改方案 #

1. 调整HTML结构

给所有偶数步骤的.stepper-item添加step-name-top类，并调换内部step-name和step-counter的顺序，同时移除内联样式与工具类，统一用CSS控制间距：

<div class="form-wizard-header">
    <div class="stepper-wrapper">
        <!-- 第1步：名称在下 -->
        <div class="stepper-item @if(empty($this_is_me_return_back_data) || $this_is_me_return_back_data->fieldset_id == 'fieldset_one') active @endif" onclick="switchFieldset('fieldset_one',this)" id="pedigree_bar">
            <div class="step-counter">1</div>
            <div class="step-name">My Pedigree Info</div>
        </div>
        <!-- 第2步：名称在上 -->
        <div class="stepper-item step-name-top @if(!empty($this_is_me_return_back_data) && $this_is_me_return_back_data->fieldset_id == 'fieldset_two') active @endif" onclick="switchFieldset('fieldset_two',this)" id="find_me_here_bar">
            <div class="step-name">Find Me Here</div>
            <div class="step-counter">2</div>
        </div>
        <!-- 第3步：名称在下 -->
        <div class="stepper-item @if(!empty($this_is_me_return_back_data) && $this_is_me_return_back_data->fieldset_id == 'fieldset_three') active @endif" onclick="switchFieldset('fieldset_three',this)" id="gender_identity_bar">
            <div class="step-counter">3</div>
            <div class="step-name">Gender Identity Information</div>
        </div>
        <!-- 第4步：名称在上 -->
        <div class="stepper-item step-name-top @if(!empty($this_is_me_return_back_data) && $this_is_me_return_back_data->fieldset_id == 'fieldset_four') active @endif" onclick="switchFieldset('fieldset_four',this)" id="enthnicity_bar">
            <div class="step-name">Ethnicity Information</div>
            <div class="step-counter">4</div>
        </div>
        <!-- 第5步：名称在下 -->
        <div class="stepper-item @if(!empty($this_is_me_return_back_data) && $this_is_me_return_back_data->fieldset_id == 'fieldset_five') active @endif" onclick="switchFieldset('fieldset_five',this)" id="neighborhood_bar">
            <div class="step-counter">5</div>
            <div class="step-name">My Neighborhood is</div>
        </div>
        <!-- 第6步：名称在上 -->
        <div class="stepper-item step-name-top @if(!empty($this_is_me_return_back_data) && $this_is_me_return_back_data->fieldset_id == 'fieldset_six') active @endif" onclick="switchFieldset('fieldset_six',this)" id="employment_bar">
            <div class="step-name">Employment Information</div>
            <div class="step-counter">6</div>
        </div>
        <!-- 第7步：名称在下 -->
        <div class="stepper-item @if(!empty($this_is_me_return_back_data) && $this_is_me_return_back_data->fieldset_id == 'fieldset_seven') active @endif" onclick="switchFieldset('fieldset_seven',this)" id="protect_cards_bar">
            <div class="step-counter">7</div>
            <div class="step-name">Protect These Charge Cards</div>
        </div>
        <!-- 第8步：名称在上 -->
        <div class="stepper-item step-name-top @if(!empty($this_is_me_return_back_data) && $this_is_me_return_back_data->fieldset_id == 'fieldset_eight') active @endif" onclick="switchFieldset('fieldset_eight',this)" id="facial_image_upload_bar">
            <div class="step-name">Facial Image Upload</div>
            <div class="step-counter">8</div>
        </div>
        <!-- 第9步：名称在下 -->
        <div class="stepper-item @if(!empty($this_is_me_return_back_data) && $this_is_me_return_back_data->fieldset_id == 'fieldset_nine') active @endif" onclick="switchFieldset('fieldset_nine',this)" id="head_n_face_bar">
            <div class="step-counter">9</div>
            <div class="step-name">Head & Face Info</div>
        </div>
        <!-- 第10步：名称在上 -->
        <div class="stepper-item step-name-top @if(!empty($this_is_me_return_back_data) && $this_is_me_return_back_data->fieldset_id == 'fieldset_ten') active @endif" onclick="switchFieldset('fieldset_ten',this)" id="hair_bar">
            <div class="step-name">Hair</div>
            <div class="step-counter">10</div>
        </div>
        <!-- 第11步：名称在下 -->
        <div class="stepper-item @if(!empty($this_is_me_return_back_data) && $this_is_me_return_back_data->fieldset_id == 'fieldset_eleven') active @endif" onclick="switchFieldset('fieldset_eleven',this)" id="distinguish_bar">
            <div class="step-counter">11</div>
            <div class="step-name">Distinguishing Identifiers</div>
        </div>
        <!-- 第12步：名称在上 -->
        <div class="stepper-item step-name-top @if(!empty($this_is_me_return_back_data) && $this_is_me_return_back_data->fieldset_id == 'fieldset_twelve') active @endif" onclick="switchFieldset('fieldset_twelve',this)" id="twin_identifier_bar">
            <div class="step-name">Twin Identifier</div>
            <div class="step-counter">12</div>
        </div>
        <!-- 第14步：名称在上 -->
        <div class="stepper-item step-name-top @if(!empty($this_is_me_return_back_data) && $this_is_me_return_back_data->fieldset_id == 'fieldset_fourteen') active @endif" onclick="switchFieldset('fieldset_fourteen',this)" id="medical_info_bar">
            <div class="step-name">Medical Info</div>
            <div class="step-counter">14</div>
        </div>
        <!-- 第15步：名称在下 -->
        <div class="stepper-item @if(!empty($this_is_me_return_back_data) && $this_is_me_return_back_data->fieldset_id == 'fieldset_fifteen') active @endif" onclick="switchFieldset('fieldset_fifteen',this)" id="family_history_bar">
            <div class="step-counter">15</div>
            <div class="step-name">Family & Medical History</div>
        </div>
        <!-- 第16步：名称在上 -->
        <div class="stepper-item step-name-top @if(!empty($this_is_me_return_back_data) && $this_is_me_return_back_data->fieldset_id == 'fieldset_sixteen') active @endif" onclick="switchFieldset('fieldset_sixteen',this)" id="travel_info_bar">
            <div class="step-name">Special Licenses</div>
            <div class="step-counter">16</div>
        </div>
        <!-- 第17步：名称在下 -->
        <div class="stepper-item @if(!empty($this_is_me_return_back_data) && $this_is_me_return_back_data->fieldset_id == 'fieldset_seventeen') active @endif" onclick="switchFieldset('fieldset_seventeen',this)" id="attestation_bar">
            <div class="step-counter">17</div>
            <div class="step-name">Attestation</div>
        </div>
    </div>
</div>

2. 更新CSS样式

添加针对交替布局的样式控制，统一间距并保持连接线对齐：

<style>
    .stepper-wrapper {
        margin-top: auto;
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
    }
    .stepper-item {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
        cursor: pointer;

        @media (max-width: 768px) {
            font-size: 12px;
        }
    }

    .stepper-item::before {
        position: absolute;
        content: "";
        border-bottom: 2px solid #ccc;
        width: 100%;
        top: 20px;
        left: -50%;
        z-index: 2;
    }

    .stepper-item::after {
        position: absolute;
        content: "";
        border-bottom: 2px solid #ccc;
        width: 100%;
        top: 20px;
        left: 50%;
        z-index: 2;
    }

    .stepper-item .step-counter {
        position: relative;
        z-index: 5;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #ccc;
    }

    /* 奇数步骤：名称在计数器下方 */
    .stepper-item:not(.step-name-top) .step-name {
        margin-top: 6px;
        text-align: center;
    }

    /* 偶数步骤：名称在计数器上方 */
    .stepper-item.step-name-top .step-name {
        margin-bottom: 6px;
        text-align: center;
    }

    .stepper-item.active {
        font-weight: bold;
    }

    .stepper-item.completed .step-counter {
        background-color: #4bb543;
    }

    .stepper-item.completed::after {
        position: absolute;
        content: "";
        border-bottom: 2px solid #4bb543;
        width: 100%;
        top: 20px;
        left: 50%;
        z-index: 3;
    }

    .stepper-item:first-child::before {
        content: none;
    }
    .stepper-item:last-child::after {
        content: none;
    }
    .permanent_color{
        color:skyblue;
    }
</style>

关键说明 #

• 通过step-name-top类区分奇偶步骤的布局逻辑，避免重复代码
• 调整元素顺序配合CSS间距控制，实现名称上下交替的效果
• 保持连接线的top:20px（计数器垂直居中位置），确保视觉上的连贯性

内容的提问来源于stack exchange，提问作者web pakistan