CSS - 如何使用 CSS 增加下拉菜单的宽度？

Question

在代码中我有复选框，选中后会显示下拉列表。 如果选择下拉列表的第一个值，则下一个下拉列表将显示在其旁边。 问题是我无法增加下拉菜单的宽度，并且全文不可见。

   <div class="flex items-center w-full">
                        <div id="data" fxLayout="row" class="w-1/3">
                            <mat-checkbox formControlName="allowData"
                                >Allow</mat-checkbox
                            >
                        </div>
                        <div
                            *ngIf="form2.value.extendedProperties.allowData"
                            fxLayout="row"
                            fxLayoutAlign="start center"
                            fxLayoutGap="16px"
                            class="w-1/4"
                        >
                            <mat-form-field>
                                <mat-select
                                    placeholder="Amazon"
                                    formControlName="dataCharged"
                                >
                                    <mat-option
                                        *ngFor="let info of dataCharged.values"
                                        [value]="info"
                                        >{{ dataCharged.descriptions[info] }}</mat-option
                                    >
                                </mat-select>
                            </mat-form-field>

                            <mat-form-field
                                *ngIf="
                                    form2.value.extendedProperties.dataCharged ==
                                    dataCharged.nominationAmazon
                                "
                            >
                                <mat-select placeholder="Select" formControlName="nominationAmazonId">
                                    <mat-option [value]="0">None</mat-option>
                                    <mat-option *ngFor="let amazon of amazons" [value]="amazon.id">
                                        {{.name }}
                                    </mat-option>
                                </mat-select>
                            </mat-form-field>

                            <mat-checkbox
                                fxFlex="40"
                                *ngIf="
                                    form2.value.extendedProperties.dataCharged ==
                                    dataCharged.classEntryAmazon
                                "
                                formControlName="refundClassEntryAmazon"
                            >
                                Refund
                            </mat-checkbox>
                        </div>
                    </div>

Answer 1

w-full

类将使内部元素占据其父级的整个宽度，而不管父级的宽度如何。

这是一个例子：

<div class="w-2/5">
  <div class="w-full">
    <!-- Content inside div with full width -->
  </div>
</div>

在此示例中，外部

div

的宽度为其父级的 2/5，由于应用了

div

，内部

div

将占据外部

w-full

的整个宽度。这允许内部

div

内的内容延伸到其包含块的整个宽度。根据您的具体布局要求调整这些类。