html - 如何创建多步骤表单

Question

我一直在尝试创建一个多步骤表单，在我的 CSS 上工作以实现我想要的结果，但我无法实现我想要的确切解决方案。

我能够设计它的布局，但我面临的问题是我想要通过这些链接的行。

下面是我要实现的目标:

我能想出什么:

如果您看一下第二张图片的顶部。您会在这些链接的顶部看到灰线。

HTML 标记

<ul id="owp-checkout-timeline" class="owp-woo-checkout-timeline clr square step-4">

            <li id="timeline-0" data-step="0" class="timeline login active">
            <div class="timeline-wrapper">
                <span class="timeline-step">1.</span>
                <span class="timeline-label">Login</span>
            </div>
        </li>

    <li id="timeline-1" data-step="1" class="timeline billing ">
        <div class="timeline-wrapper">
            <span class="timeline-step">2.</span>
            <span class="timeline-label">Billing</span>
        </div>
    </li>

    <li id="timeline-2" data-step="2" class="timeline shipping" >
        <div class="timeline-wrapper">
            <span class="timeline-step">3.</span>
            <span class="timeline-label">Shipping</span>
        </div>
    </li>

    <li id="timeline-3" data-step="3" class="timeline payment">
        <div class="timeline-wrapper">
            <span class="timeline-step">4.</span>
            <span class="timeline-label">Payment Info</span>
        </div>
    </li>

</ul>

CSS代码

.owp-woo-checkout-timeline{
        display:-webkit-box;
        display:-moz-box;
        display:-ms-flexbox;
        display:-webkit-flex;
        display:flex;
        margin:0 0 1em;
        padding:0;
        font-size:90%;
        text-transform:uppercase;
}
.owp-woo-checkout-timeline>li.timeline{
    list-style:none;
    text-align:center;
    width:auto;
    padding:0;
    margin:0;
    position:relative;
    text-overflow:ellipsis;
    color:#b71c1c;
    display:block

}

    .timeline-wrapper{
                 display: table-row;
            }
    .timeline-wrapper:before {
    top: 14px;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 100%;
    height: 1px;
    background-color: #ccc;
    z-order: 0;
}

.owp-woo-checkout-timeline>li.timeline .timeline-step,.owp-woo-checkout-timeline>li.timeline .timeline-step:after,
        .owp-woo-checkout-timeline>li.timeline .timeline-step:before{
            background-color:#e65100; 
            color:#fff; 
            font-weight:bold;
            border-color:#247830;
            padding:6px;
            border-radius:800px;
            }



.owp-woo-checkout-timeline>li.timeline .timeline-step:before{left:0}
.owp-woo-checkout-timeline>li.timeline .timeline-step:after{right:0}

.owp-woo-checkout-timeline>li:first-child .timeline-step:after,
.owp-woo-checkout-timeline>li:first-child 
.owp-woo-checkout-timeline{width:50%;margin-left:50%}
.owp-woo-checkout-timeline>li:last-child .timeline-step:after,
.owp-woo-checkout-timeline>li:last-child .timeline-step:before{width:50%;margin-right:50%}
.owp-woo-checkout-timeline>li.active,.progress-indicator>li.active .timeline-step{color:#337AB7}
.owp-woo-checkout-timeline>li.active .timeline-step,.progress-indicator>li.active .timeline-step:after,
.owp-woo-checkout-timeline>li.active .timeline-step:before{background-color:#337AB7;border-color:#122a3f}
.owp-woo-checkout-timeline>li a:hover .timeline-step,.progress-indicator>li a:hover .timeline-step:after,
.owp-woo-checkout-timeline>li a:hover .timeline-step:before{background-color:#5671d0;border-color:#1f306e}
.owp-woo-checkout-timeline>li a:hover .timeline-step{color:#5671d0}

Answer 1

在 .timeline-wrapper:before 类上将此 z-order: 0; css 更改为 z-index:-1;。 同时更改行的top position 并将position:relative 添加到主圆或字体。