0

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

图像中显示的内容是通过循环获得的，该循环为每次迭代生成一个<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>标签具有以下两个 css 类之一。ngClass恕我直言，这就是我的问题所在

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

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

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

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

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

这是css<app-item-icon>

.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 内容投影。也许找到解决方案会有所帮助

4

1 回答 1

1

我看到你的类 .container 有display: flex. 如果<ng-content>通过添加 [icon] 在第一个包含跨度，则可以像这样更改 .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课程。

于 2020-08-19T08:00:59.450 回答