angular

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 class 之一。恕我直言，这就是我的问题所在

.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 在容器上class：没有影响；
设置 margin-right 而不是圆圈左侧的：没有效果，因为我认为它们的右侧没有任何元素；

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

Answer 1

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

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

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

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

angular - html - font awesome icon being misaligned on the right side of a div

html

css

font-awesome

angular-content-projection