>

원하는 결과를 얻기 위해 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}

  • 답변 # 1

    z-order: 0; 를 변경  css받는-사람 z-index:-1;   .timeline-wrapper:before 에서  수업. 또한 라인의최상위 위치를 변경하고 position:relative 를 추가하십시오.  메인 서클이나 글꼴에 연결합니다.

  • 답변 # 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>
    
    

  • 이전 powershell 스크립트에서 배열 요소를 확인할 때 오류가 발생했습니다 - 예기치 않은 토큰 'eq'
  • 다음 javascript - Vuex 계산 속성이 v-show를 업데이트하지 않습니다