HTML: float left не работает для всех элементов с * ngFor

Question

Это мой HTML код:

<div *ngIf="symbol !== undefined">
    <p>Symbol</p>
    <div *ngFor="let symbol of symbols">
            <img *ngIf="symbol == 1" class="symbol" width="150" src="assets/minus.png">
            <img *ngIf="symbol == 2" class="symbol" width="150" src="assets/plus.png">
            <img *ngIf="symbol == 3" class="symbol" width="150" src="assets/mal.png">
            <img *ngIf="symbol == 4" class="symbol" width="150" src="assets/geteilt.png">
    </div>
</div>

Я хочу видеть твои символы рядом друг с другом. Пример:

[symbol] [symbol] [symbol] [symbol]
[symbol] [symbol] [symbol] [symbol]
[symbol] [symbol] [symbol] [symbol]

Итак, мой CSS-файл выглядит так:

.symbol{
    float: left;
    margin:2%;
}

Обычно, когда один и тот же символ встречается дважды в конце строки (с пробелом в следующей строке), происходит разрыв в следующей строке (правильно). Но в следующей строке только один символ справа и разрыв. Пример:

[symbol][symbol][symbol][symbol][symbol][symbol]

                                        [symbol]

[symbol][symbol][symbol][symbol][symbol][symbol]

Почему?

Решение: Мои изображения имеют другой размер. Это было всего в 2 раза дольше!

Answer 1

Решение: фотографии должны быть одинакового размера. У меня была разница с 2px!

Answer 2

.symbol{
  display: flex;
  flex-direction: row;
}

<div *ngIf="symbol !== undefined">
    <p>Symbol</p>
    <div *ngFor="let symbol of symbols" class="symbol">
            <img *ngIf="symbol == 1" width="150" src="assets/minus.png">
            <img *ngIf="symbol == 2" width="150" src="assets/plus.png">
            <img *ngIf="symbol == 3" width="150" src="assets/mal.png">
            <img *ngIf="symbol == 4" width="150" src="assets/geteilt.png">
    </div>
</div>