带连接线的角形柔性盒

问题描述

我正在尝试创建几个带有文本框和将它们全部连接起来的线的框。我为每个框创建了一个这样的类：

.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>

但是此行不会在任何地方显示

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）