div 行列表组中的元素

Question

我不知道为什么当我在 div 中有第二个选择时它让我排队。我希望（见图）她会并排走。

我在要移动的部分添加了评论。

<div class="card-body">

            <ul class="list-group">

                <li class="list-group-item">
                    <tr *ngFor="let row of matrix; index as r">
                        <td *ngFor="let columns of row; index as c">
                    <tr *ngIf="r === 1">
                        <td *ngIf="c === 0">
                            <strong>Efficacia:</strong><br>
                            <select [(ngModel)]="scelta">
                                <option value="yes">è più importante di</option>
                                <option value="no">è meno importante di</option>
                            </select>
                            modicità di costo. Di quanto?

                            <!--THIS MUST GO TO THE RIGHT INSTEAD OF DOWN-->
                            <div *ngIf="scelta === 'yes'">
                                <select [(ngModel)]="oggetto[r][c]" (change)="onSelectChange(r,c)">
                                    <option [ngValue]="a.num" *ngFor="let a of arrayComparazioneFrazioni">
                                        {{a.char}}
                                    </option>
                                </select>
                            </div>
                            <div *ngIf="scelta === 'no'">
                                <select [(ngModel)]="oggetto[r][c]" (change)="onSelectChange(r,c)">
                                    <option [ngValue]="a.num" *ngFor="let a of arrayComparazioneInteri">
                                        {{a.char}}
                                    </option>
                                </select>
                            </div>
                            <!-- END -->

                        </td>
                    </tr>
                    </td>
                    </tr>
                </li>

Answer 1

嗯，如果我没理解错的话，你的问题可以通过改变你的div的display属性来解决。默认情况下，div 设置为 display: block;。您可以将其更改为 display: inline-block; 以在同一行显示它。查看下面的代码：

编辑

您也可以将其应用于其他 div。最好创建一个 class 并将这些样式设置为 class.

编辑 2

您只需使用 bootstrap class d-inline-block 即可！（演示在第二个div.）

<div class="card-body">

            <ul class="list-group">

                <li class="list-group-item">
                    <tr *ngFor="let row of matrix; index as r">
                        <td *ngFor="let columns of row; index as c">
                    <tr *ngIf="r === 1">
                        <td *ngIf="c === 0">
                            <strong>Efficacia:</strong><br>
                            <select [(ngModel)]="scelta">
                                <option value="yes">è più importante di</option>
                                <option value="no">è meno importante di</option>
                            </select>
                            modicità di costo. Di quanto?

                            <!--THIS MUST GO TO THE RIGHT INSTEAD OF DOWN-->
                            <div *ngIf="scelta === 'yes'" style="display: inline-block;">
                                <select [(ngModel)]="oggetto[r][c]" (change)="onSelectChange(r,c)">
                                    <option [ngValue]="a.num" *ngFor="let a of arrayComparazioneFrazioni">
                                        {{a.char}}
                                    </option>
                                </select>
                            </div>
                            <div *ngIf="scelta === 'no'" class="d-inline-block">
                                <select [(ngModel)]="oggetto[r][c]" (change)="onSelectChange(r,c)">
                                    <option [ngValue]="a.num" *ngFor="let a of arrayComparazioneInteri">
                                        {{a.char}}
                                    </option>
                                </select>
                            </div>
                            <!-- END -->

                        </td>
                    </tr>
                    </td>
                    </tr>
                </li>

div 行列表组中的元素

div elements in list-group that go line

html

javascript

html-lists

drop-down-menu

angular

编辑

编辑 2