步骤条```html 1 Step 1 2 Step 2 3 Step 3 4 Step 4 ``` ```js .st

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link  href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"><!-- Bootstrap is required -->
  <link rel="stylesheet" href="step.css">
  <title>Document</title>
</head>
<body>
  <ul class="steps">
    <li class="step step-success">
      <div class="step-content">
        <span class="step-circle">1</span>
        <span class="step-text">Step 1</span>
      </div>
    </li>
    <li class="step step-active">
      <div class="step-content">
        <span class="step-circle">2</span>
        <span class="step-text">Step 2</span>
      </div>
    </li>
    <li class="step">
      <div class="step-content">
        <span class="step-circle">3</span>
        <span class="step-text">Step 3</span>
      </div>
    </li>
    <li class="step">
      <div class="step-content">
        <span class="step-circle">4</span>
        <span class="step-text">Step 4</span>
      </div>
    </li>
  </ul>
</body>
</html>










.steps {
  display: flex;

overflow-x: auto;

margin: 0;

padding: 0;

list-style: none;

}

.steps .step:first-child {
  margin-left: auto
}

.steps .step:last-child {
  margin-right: auto
}

.step:first-of-type .step-circle::before {
  display: none
}

.step:last-of-type .step-content {
  padding-right: 0
}

.step-content {
  display: flex;

align-items: center;

/* flex-direction: column; */
justify-content: center;

box-sizing: content-box;

width: 9rem;

min-width: 5rem;

max-width: 9rem;

padding-top: .5rem;

padding-right: 1rem

}

.step-circle {
  position: relative;

display: flex;

align-items: center;

justify-content: center;

width: 1.5rem;

height: 1.5rem;

color: #adb5bd;

border: 2px solid #adb5bd;

border-radius: 100%;

background-color: #fff

}

.step-circle::before {
  position: absolute;

top: 50%;

left: 50px;

display: block;

width: calc(9rem + 1rem - 5rem);

height: 2px;

content: "";

transform: translate(-100%, -50%);

color: #adb5bd;

background-color: currentColor

}

.step-text {
  /* margin-top: .25em; */
  margin-left: .25rem;

word-break: break-all;

color: #adb5bd;

}

.step-active .step-circle {
  color: #fff;

border-color: #007bff;

background-color: #007bff;

}

.step-active .step-circle::before {
  color: #007bff
}

.step-active .step-text {
  color: #007bff
}

.step-error .step-circle {
  color: #fff;

border-color: #dc3545;

background-color: #dc3545;

}

.step-error .step-circle::before {
  color: #dc3545
}

.step-error .step-text {
  color: #dc3545
}

.step-success .step-circle {
  color: #28a745;

border-color: #28a745;

background-color: #fff;

}

.step-success .step-circle::before {
  color: #28a745
}

.step-success .step-text {
  color: #28a745
}