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

问题描述

我有一个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>

由于<i>属性，第二个ngClass标签具有以下两个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>

我正在使用 Angular 框架和 content-projection 。 <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;
}

我尝试过的很远：

float: right上的圆圈图标：完全没有效果；
position: absolute：实际上是可行的，但是出乎意料的是，这些图标在垂直方向上没有居中，而是稍微向上移动；
text-align: end对容器类：无效；
在圆圈上设置margin-right而不是左边的数字：没有效果，因为我认为他们的右边没有任何元素；

关于角度：：我不知道为什么，但是使用浏览器检查工具，我注意到圆圈图标设置了::before伪元素。我认为这是由于Angular内容投影。找出解决方案可能会有所帮助

解决方法

我看到您的班级.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>，而文本长度无关紧要。通常，您在margin-left: 90vw !important;类中不再需要.is-active .is-not-active。

angular angular-content-projection font-awesome html