html - 带连接线的 Angular Flex 盒子

Question

我正在尝试创建几个带有文本的框和一条连接它们的线。我为每个盒子创建了一个类，如下所示：

.box {
  background: white;
  border: 1px solid black;
  color: black;
  border-radius: 8px;
  padding: 8px 20px;
  margin: 20px;
}

然后创建几个盒子我有这个：

<div fxLayout="row" fxLayoutAlign="space-between">
   <div class="box" *ngFor="let box of boxes" fxLayout="column" fxLayoutAlign="start center">
     <div>
       {{box.firstText}}
     </div>
     <div>
        {{box.secondText}}
     </div>
   </div>
</div>

我正在尝试添加一条连接每个框的水平线，因此我尝试<hr>在每个循环中的框末尾添加一个标签，如下所示：

<div fxLayout="row" fxLayoutAlign="space-between">
       <div class="box" *ngFor="let box of boxes" fxLayout="column" fxLayoutAlign="start center">
         <div>
           {{box.firstText}}
         </div>
         <div>
            {{box.secondText}}
         </div>
          <hr> //Addded here
       </div>
    </div>

但是这条线没有出现在任何地方

标签： htmlcssangular-flex-layout