输入字段中的图标重叠

Question

我正在使用 type="text" 的输​​入字段。我在文本框的两侧添加了图标来增加和减少文本框内的数字。它工作正常，直到我增加图标的大小。因为，图标足够大，以至于它与给定的输入重叠。

<mat-form-field >
    <mat-label>Rank</mat-label>
    <input matInput type="text" [(ngModel)]="number">
    <button mat-button matPrefix mat-icon-button>
       <mat-icon style="font-size: 40px">add_box</mat-icon>
    </button>
    <button mat-button matSuffix mat-icon-button>
       <mat-icon style="font-size: 40px">indeterminate_check_box</mat-icon>
    </button>
</mat-form-field> 

如何自定义输入字段，使其不会与给定的输入重叠？

Answer 1

尝试像这样使用 flex-box。

<mat-form-field >
    <mat-label>Rank</mat-label>
    <div style="display:flex;">
        <button mat-button matPrefix mat-icon-button>
            <mat-icon style="font-size: 40px">add_box</mat-icon>
        </button>
        <input matInput type="text" [(ngModel)]="number">
        <button mat-button matSuffix mat-icon-button>
            <mat-icon style="font-size: 40px">indeterminate_check_box</mat-icon>
        </button>
    </div>
</mat-form-field>