HTML: 向左浮动不适用于所有带有 *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

.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有区别！

HTML: 向左浮动不适用于所有带有 *ngFor 的元素

HTML: float left isn't working for all elements with *ngFor

html

css-float

angular