angular - html - 字体真棒图标在 div 的右侧未对齐

Question

我有一个 div 列表，每个都有一个图标、一些文本和另一个必须在右侧的图标（一个圆圈）。为了实现这一点，我设置了margin-left 属性，但当然边距是根据文本长度计算的，而不是根据父 div 位置计算的。 因此导致右侧的圆圈未对齐。我使用 font awesome 图标包。

图像中显示的内容是通过循环获得的，该循环为每次迭代生成一个<app-item-icon> 组件

<app-item-icon>
          <i icon class="fas fa-2x fa-clipboard-list"></i>
          <span class="span-list-item">{{ item.name }}</span>
          <i class="fas fa-circle" [ngClass]="{'is-active': item.is_active, 'is-not-active': !item.is_active}" ></i>
</app-item-icon>

由于ngClass 属性，第二个<i> 标记具有以下两个css 类之一。恕我直言，这就是我的问题所在

.is-active {
    color: green;
    margin-left: 90vw !important;
}

.is-not-active {
    color: red;
    margin-left: 90vw !important;
}

这是<app-item-icon>的html文件：

<div class="container">
    <ng-content select="[icon]" ></ng-content>
    <ng-content></ng-content>
</div>

我正在使用带有 content-projection 的 Angular 框架。 <ng-content> 指令将被渲染模板上的 <div> 容器替换。第一个ng-content 捕获左侧的第一个图标，而第二个ng-content 捕获导致mi 问题的文本和圆圈图标。

这是<app-item-icon>的css

.container {
    display: flex;
    align-items: center;
    padding: 0;
}

:host ::ng-deep *{
    float: left;
}

:host ::ng-deep i {
    padding: 3px 1px;
    margin-right: 6px !important;
}

:host ::ng-deep :not(i) {
    margin-left: 2px;
    margin-top: 2px;
    margin-bottom: 2px;
}

到目前为止我所做的尝试：

1. 圆圈图标上float: right：完全没有效果；
2. position: absolute在圈子上：确实有效，但出乎意料的是，图标变得垂直不居中，略微向上移动；
3. text-align: end对容器类：无效；
4. 在圆圈上设置margin-right 而不是左侧：没有效果，因为我认为它们的右侧没有任何元素；

关于 ANGULAR： 我不知道为什么，但是使用浏览器检查工具，我注意到圆形图标有 ::before 伪元素集。我认为这是由于 Angular 内容投影。也许找到解决方案会有所帮助

Answer 1

我看到你的类 .container 有 display: flex。如果您通过添加 [icon] 在第一个 <ng-content> 中包含您的跨度，您可以像这样更改您的 .container 类：

.container {
    display: flex;
    align-items: center;
    justify-content: space-between; 
    padding: 0;
}

justify-content: space-between; 将在一侧显示每个<ng-content>，文本长度无关紧要。 通常，您的.is-active .is-not-active 课程中不再需要您的margin-left: 90vw !important;。