我有以下角度 html 组件:
<div fxLayout fxLayout.xs="row" fxLayoutAlign="left" fxLayoutGap="5px" fxLayoutGap.xs="0">
<div flex class="item item-1" fxFlex="95%">
<mat-form-field class="large-field">
<input matInput placeholder="Full Name" aria-label="Full Name" [matAutocomplete]="auto" [formControl]="FullNameCtrl">
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="onSelected($event.option.value)">
<mat-option *ngFor="let data of filteredCompanyFullName | async" [value]="data">
<span>{{ data.FullName }}</span>
</mat-option>
</mat-autocomplete>
</mat-form-field>
</div>
<div flex class="item item-2" fxFlex="4%">
<button matTooltip="Refresh" mat-icon-button (click)="refresh()">
<mat-icon>refresh</mat-icon>
</button>
</div>
</div>
上面所做的是显示一个自动完成下拉菜单和一个刷新按钮。我正在努力在 html 上方设置样式以显示如下图所示的内容:
但是,它看起来像以下不是所需的输出:
我应该改变什么来获得第一张图片?我希望输入字段占据行的 95% 宽度,并且它旁边的一个小刷新按钮向右对齐。