在图标图像之间创建重复的水平分隔线

Question

目前的情况如下：

我在使用angular，html，css在我的图标图像之间放置水平分隔线时遇到了麻烦。我想要实现的是：

              icon ---------- icon ---------- icon --------- icon

这是我的代码：

<div *ngFor="let item of parking; let i = index">
    <div *ngIf="i == 0 || i == 1 || i == 2" class="divider">
        <img src="http://cdn.appwinit.com/home/{{ item.image }}/image.png" alt="{{ item.title }}" srcset="http://cdn.appwinit.com/home/{{ item.image }}/image@2x.png 2x, http://cdn.appwinit.com/home/{{ item.image }}/image@3x.png 3x" style="height: 69px; width: 69px; display: block; margin: auto;"/>
         <span class="horizontal-divider"></span>
     </div>
     <div *ngIf="i == 3" class="divider">
         <img src="http://cdn.appwinit.com/home/{{ item.image }}/image.png" alt="{{ item.title }}" srcset="http://cdn.appwinit.com/home/{{ item.image }}/image@2x.png 2x, http://cdn.appwinit.com/home/{{ item.image }}/image@3x.png 3x" style="height: 69px; width: 69px; display: block; margin: auto;"/>
      </div>
</div>
<div *ngFor="let item of parking; let i = index" class="col-xs-12 col-sm-3">
    <p class="color-blue text-uppercase" style="font-size: 13px; margin-top: 20px;">{{ item.title }}</p>
    <p class="opacity-65" style="font-size: 13px;" [innerHTML]="short ? item.short : item.body"></p>
</div>

这是我的css：

div.divider {
    display: flex;
    flex-direction: row;
    align-items: center;
}

div.divider {
    flex-shrink: 0;
}

div.divider span.horizontal-divider {
    width: 100%;
    flex-shrink: 1;
    border-bottom: 1px solid black;
    margin: 5px
}