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%;
}

通常当相同的符号在一行的末尾有两次（对下一行有一个braek）时，下一行有一个中断（正确）。但在下一行中，右侧只有一个符号而且是休息符号。例：

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

                                        [symbol]

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

为什么？

解决方案：我的照片尺寸不同。它只增加了2倍！

Answer 1

.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>

Answer 2

解决方案：图片需要完全相同的尺寸。我与2px有所不同！