Question

在芯片自动完成组件中，我在下拉上方添加了按钮，如下图所示。

我想在按钮下方添加此下拉菜单，类似这样。

对下拉菜单和按钮都应用了填充，但是没有得到确切的结果。这是stackblitz链接。

Answer 1

尝试这样的事情：

<mat-grid-list [cols]="breakpoint" rowHeight="277px" (window:resize)="onResize($event)">
    <mat-grid-tile [class.fullWidth]="breakpoint == 1" class="g1">


        <mat-form-field class="example-chip-list">
            <mat-chip-list #chipList>
                <mat-chip *ngFor="let fruit of fruits" [selectable]="selectable" [removable]="removable" (removed)="remove(fruit)">
                    {{fruit}}
                    <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
                </mat-chip>
                <input placeholder="New Players..." #fruitInput [formControl]="fruitCtrl" [matAutocomplete]="auto" [matChipInputFor]="chipList"
                 [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="addOnBlur" (matChipInputTokenEnd)="add($event)">
            </mat-chip-list>
            <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
                <mat-option *ngFor="let fruit of filteredFruits | async" [value]="fruit">
                    {{fruit}}
                </mat-option>
            </mat-autocomplete>

            <div style="width: 100% !important;margin-top: 5%;border-top: 2px solid red;">

            <button type="button" style="width: 100% !important;margin-top: 5%;" mat-stroked-button color="primary">
<mat-icon>add</mat-icon>CREATE NEW PLAYER</button>
        </div>
        </mat-form-field>
</mat-grid-tile>

Answer 2

您可以使用普通CSS来做到这一点。使用平移-它将使元素相对于其在x，y轴上的原点移动固定量（例如像素）。

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate

对齐“芯片自动完成”组件中按钮下方的下拉菜单

2 个答案: