代码之家 › 专栏 › 技术社区 › Hiyanneri

CSS-如何使用CSS增加下拉列表的宽度?

width tailwind-css drop-down-menu css

Hiyanneri · 技术社区 · 2 年前

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

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

1 回复 | 直到 2 年前

Ashish Shah 2 年前

这个 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 以在其容纳块的整个宽度上延伸。根据您的特定布局要求调整这些类。