将挠曲中的锚对齐为浮动文本

Question

我目前有以下定义：

<div class="div-container">
 <mat-icon>new_release</mat-icon>
 <span>&nbsp;</span>
 <a><span>VO/YI/AI 1 HJ.2022a;</span></a>
 <span>&nbsp;</span>
 <a><span>ABC/BBC/VOA 7.2022;</span></a>
 <span>&nbsp;</span>
 <a><span>UN/AIDA 16.8.2022</span></a>
</div>

使用

.div-container{
    display: flex;
    align-items: center;
}
a{
 display: inline!important;
}

结果显示如下所示

​

​

我想要的是左边的图像，而不是浮动的文本。

VO/YI/AI 1 HJ.2022a; ABC/BBC/VOA 7.2022; UN/AIDA 16.8.2022

或者，如果左边的空格太小，图标之类的东西

VO/YI/AI 1 HJ.2022a; ABC/BBC/VOA 
7.2022; UN/AIDA 16.8.2022

老实说，我不知道是否需要挠曲。但是图标应该垂直地放置在左边。

Answer 1

您不需要空空间，如果要添加空间，可以为元素使用margin。

​

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

<div class="div-container">
 <mat-icon>new_release</mat-icon>
 <a><span>VO/YI/AI 1 HJ.2022a;</span></a>
 <a><span>ABC/BBC/VOA 7.2022;</span></a>
 <a><span>UN/AIDA 16.8.2022</span></a>
</div>

​