如何在垫子选项下制作2 span，使其在角材料中左右对齐自动完成

Question

我使用角材质自动完成，这里我有选项下拉，我有2个跨度，第一个跨度必须左对齐，第二个跨度要左对齐，我尝试了绝对位置设置为第二个跨度，但响应性给出了问题。

Html:

<mat-form-field class="example-full-width">
<input #stateInput (keyup)="0" matInput placeholder="State" aria-label="State" [matAutocomplete]="auto" [formControl]="stateCtrl">
<mat-autocomplete #auto="matAutocomplete">
<mat-option (onSelectionChange)="stateInput.value !=undefined && onEnter($event)" *ngFor="let state of filteredStates | async" [value]="state.name">
<img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" height="25" />
<span>{{ state.name }}</span> |
<span>Population: {{state.population}}</span>
</mat-option>
</mat-autocomplete>
</mat-form-field>

演示

Answer 1

您应该将span包装到另一个标签中，然后将display:flex和justify-content:space-betweeen应用于该新标签。

您还需要将跨度宽度拉伸到新标签和材料.mat-option-text，例如我应用了width:100%来占用整个可用空间。

这是你的代码更新。