angular - html - значок шрифта awesome смещен по правой стороне 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>

Второй <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>

Я использую фреймворк Angular с контент-проекцией.<ng-content> директива будет заменена на <div>контейнер на визуализированном шаблоне. Первоеng-content ловит первый значок слева, а второй ng-content улавливает текст и значок круга, что вызывает проблему mi.

Это 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 вместо левого на кружках: никакого эффекта, потому что, я думаю, у них нет никаких элементов с правой стороны;

ОБ УГЛОВОЙ: Я не знаю почему, но с помощью инструмента проверки браузера я заметил, что значки кружков имеют::beforeнабор псевдоэлементов. Я думаю, это связано с контент-проекцией Angular. Может быть, будет полезно найти решение

Answer 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 классы.