创建垂直步进HTML CSS时出现对齐问题

Question

我正在用html＆css创建一个简单的垂直步进器组件。并尝试像this这样设计。我在CSS部分中碰到了一些对齐问题。

CSS

.steps-container .step::before {
  display: inline-block;
  content: "";
  font-size: 10px;
  color: #fff;
  text-align: center;
  background-color: #e1e1e1;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: relative;
  right: 4px;
  top: 2px;
}

.steps-container .step.active::before {
  background-color: green;
}

.step-vertical {
  border-left: 1px solid #e1e1e1;
  margin-bottom: 5px;
  margin-left: 5px;
}

HTML

<div>
      <div class="steps-container">
        <span class="step inactive">1</span>
        <div class="step-vertical">
          <div>
            <h5 class="text-grey">label text 1</h5>
            <button>Continue</button>
          </div>
        </div>
      </div>
      <div class="steps-container">
        <span class="step active">2</span>
        <div class="step-vertical">
          <div>
            <h5 class="text-grey">label text 2</h5>
            <button>Continue</button>
          </div>
        </div>
      </div>
    </div>

。

从输出中，我希望圆内的数字1和2和标签文本应在圆旁边对齐。我不知道该如何实现。您的建议会有所帮助。

Answer 1

这是您想要的吗？在:before中添加了span css，在display: inline-block;中添加了.step-vertical，将其放在跨度旁边。

.steps-container .step {
      display: inline-block;
    content: "";
    font-size: 10px;
    color: #fff;
    text-align: center;
    background-color: #e1e1e1;
    /* width: 20px; */
    /* height: 20px; */
    border-radius: 50%;
    position: relative;
    right: 4px;
    top: 2px;
    padding: 5px 10px;
    color: black;
    vertical-align: top;
}

.steps-container .step.active::before {
  background-color: green;
}

.step-vertical {
  border-left: 1px solid #e1e1e1;
  margin-bottom: 5px;
  margin-left: 5px;
height:200px
}

h5{margin-top: 5px;
display: inline-block;}

button{
  display:block
}

.ml-2{
  margin-left:10px
}

<div>
<div class="steps-container">
      <span class="step inactive">1</span>
      <h5 class="text-grey">label text 1</h5>
      <div class="step-vertical"> 
         <div>
           <textarea class="ml-2" name="" id=""     cols="30" rows="10">           
           </textarea>
           <button class="ml-2">Continue</button>
        </div>
      </div>       
  </div>
   <div class="steps-container">
      <span class="step inactive">2</span>
      <h5 class="text-grey">label text 2</h5>
      <div class="step-vertical"> 
         <div>
           <textarea class="ml-2" name="" id="" cols="30" rows="10">            </textarea>
           <button class="ml-2">Continue</button>
        </div>
      </div>       
  </div>
</div>