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

在z-order: 0;类上将此z-index:-1; css更改为.timeline-wrapper:before。还要更改该行的顶部位置，并将position:relative添加到主圆或字体。

Answer 2

请尝试以下代码：

<!DOCTYPE html>
<html>
<head>
  <title>Accordians</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<style>
    .form_wizard .stepContainer {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  border: 0 solid #CCC;
  overflow-x: hidden;
}

/**-------**/

.wizard_horizontal ul.wizard_steps {
  display: table;
  list-style: none;
  position: relative;
  width: 100%;
  margin: 0 0 20px;
  padding: 0;
}
.wizard_horizontal ul.wizard_steps li {
  display: table-cell;
  text-align: center;
}
.wizard_horizontal ul.wizard_steps li a, .wizard_horizontal ul.wizard_steps li:hover {
  display: block;
  position: relative;
  -moz-opacity: 1;
  filter: alpha(opacity: 100);
  opacity: 1;
  color: #666;
}
.wizard_horizontal ul.wizard_steps li a:before {
  content: "";
  position: absolute;
  height: 8px;
  background: #ccc;
  top: 40px;
  width: 100%;
  z-index: 4;
  left: 0;
}
.wizard_horizontal ul.wizard_steps li a.disabled .step_no {
  background: #ccc;
}
.wizard_horizontal ul.wizard_steps li a .step_no {
  width: 80px;
  height: 80px;
  line-height: 80px;
  border-radius: 100px;
  display: block;
  margin: 0 auto 5px;
  font-size: 16px;
  text-align: center;
  position: relative;
  z-index: 5;
}
.wizard_horizontal ul.wizard_steps li a.selected:before, .step_no {
  background: #34495E;
  color: #fff;
}
.wizard_horizontal ul.wizard_steps li a.done:before, .wizard_horizontal ul.wizard_steps li a.done .step_no {
  background: #1ABB9C;
  color: #fff;
}
.wizard_horizontal ul.wizard_steps li:first-child a:before {
  left: 50%;
}
.wizard_horizontal ul.wizard_steps li:last-child a:before {
  right: 50%;
  width: 50%;
  left: auto;
}

/**-------**/

.wizard_verticle .stepContainer {
  width: 80%;
  float: left;
  padding: 0 10px;
}
.form_wizard .stepContainer div.content {
  display: block;
  position: absolute;
  float: left;
  margin: 0;
  padding: 5px;
  font: normal 12px Verdana, Arial, Helvetica, sans-serif;
  color: #5A5655;
  height: 300px !important;
  text-align: left;
  overflow: auto;
  z-index: 88;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  clear: both;
}
.actionBar {
  width: 100%;
  border-top: 1px solid #ddd;
  padding: 10px 5px;
  text-align: right;
  margin-top: 10px;
}
.actionBar .buttonDisabled {
  cursor: not-allowed;
  pointer-events: none;
  opacity: .65;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
  box-shadow: none;
}
.actionBar a {
  margin: 0 3px;
}

/**-------**/
</style>
</script>
</head>
<body>
  <div id="wizard" class="form_wizard wizard_horizontal">
    <ul class="wizard_steps anchor">
      <li>
        <a href="#step-1" class="selected" isdone="1" rel="1">
          <span class="step_no">1</span>
          <span class="step_descr">
              <small>Login</small>
          </span>
        </a>
      </li>
      <li>
        <a href="#step-2" class="done" isdone="1" rel="2">
          <span class="step_no">2</span>
          <span class="step_descr">
              <small>Billing</small>
          </span>
        </a>
      </li>
      <li>
        <a href="#step-3" class="done" isdone="1" rel="3">
          <span class="step_no">3</span>
          <span class="step_descr">
              <small>Shipping</small>
          </span>
        </a>
      </li>
      <li>
        <a href="#step-4" class="done" isdone="1" rel="4">
          <span class="step_no">4</span>
          <span class="step_descr">
              <small>Payment Info</small>
          </span>
        </a>
      </li>
    </ul>
      <div class="stepContainer">
         <div id="step-1" class="wizard_content" style="display: block;">
         </div>
         <div id="step-2" class="wizard_content" style="display: none;">
           
         </div>
         <div id="step-3" class="wizard_content" style="display: none;">
           
         </div>
         <div id="step-4" class="wizard_content" style="display: none;">
           
         </div>
      </div>
      <!-- <div class="actionBar">
        <a href="#" class="btn btn-default">Finish</a>
        <a href="#" class="btn btn-success">Next</a>
        <a href="#" class="btn btn-primary buttonDisabled">Previous</a>
      </div> -->
  </div>

 
<!-- form wizard -->

  <script type="text/javascript" src="http://xn--80akiaokt3b4b.xn--d1acnqm.xn--j1amh/templates/demo/gentelella/js/wizard/jquery.smartWizard.js"></script>

  <script type="text/javascript">
    $(document).ready(function() {
      // Smart Wizard
      $('#wizard').smartWizard();

      function onFinishCallback() {
        $('#wizard').smartWizard('showMessage', 'Finish Clicked');
        //alert('Finish Clicked');
      }
    });

    $(document).ready(function() {
      // Smart Wizard
      $('#wizard_verticle').smartWizard({
        transitionEffect: 'slide'
      });
    });
  </script>

</body>
</html>

如何创建多步骤表单

2 个答案: