如何在2行上移动小文本，而不仅使用1 div

Question

如何使“此文本”位于2行上，并将其居中放置在圆圈旁边，并将箭头放在第一个圆圈和第二个圆圈之间

https://i.stack.imgur.com/2wfVy.png

<div className="steps">
    <div className="circle">
        <div className="step-number">{number}</div>
    </div>
    <div className="step-text">This text</div>
    <div>{ shouldRenderArrow && <Icon className="arrow" name="ArrowDownward" /> }</div>
</div>

Answer 1

您的div需要一些更改，然后您需要一些样式。

.steps{
    display: flex;
 }
 
 .circle {
    border: 1px solid red;
    border-radius: 50px;
    float: left;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
 }
 
 .step-text {
     align-self: self-start;
    justify-self: start;
    flex-direction: column;
    margin-left: 6px;
    padding-top: 6px;
 }
 .arrow{
    border: 1px solid;
    width: 11px;
    display: flex;
    align-self: center;
    justify-self: flex-end;
    height:25px
 }
 .circle-arrow {
    display: flex;
    flex-direction: column;
 }

<div class="steps">
      <div class="circle-arrow">
      <div class="circle">
        <div class="step-number">1</div>
      </div>
      
      <Icon class="arrow" name="ArrowDownward" /> 
    </div>
      <div class="step-text">This text</div>
    
</div>
<div class="steps">
      <div class="circle-arrow">
      <div class="circle">
        <div class="step-number">2</div>
      </div>
      
      <Icon class="arrow" name="ArrowDownward" /> 
    </div>
      <div class="step-text">This text</div>
    
</div>
<div class="steps">
      <div class="circle-arrow">
      <div class="circle">
        <div class="step-number">3</div>
      </div>
     </div>
      <div class="step-text">This text</div>
    
</div>