你好，我如何修复我的垫子形式字段，当我放大屏幕时，它会失去宽度

Question

HTML在我的代码中，我需要在放大或缩小屏幕时，用输入宽度结束固定垫子形式的字段宽度，固定它们的宽度。

<label class="label-inline"></label>
<div class="div-inline">
<mat-form-field appearance="outline">
<mat-select>
<mat-option *ngFor="let type of types" [value]="type"></mat-option>
</mat-select>
</mat-form-field>
</div>
<label class="label-inline"></label>
<div class="div-inline">
<input [disabled]="disableField" class="form-control" />
</div>
<button class="btn" (click)="save()">{{"SAVE" | translate}}</button>

CSS

label {
width: 15%;
}
::ng-deep mat-form-field.mat-form-field-appearance-outline .mat-form-field-wrapper {
margin-top: 0;
margin-bottom: -1.25em;
}
::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
padding-bottom: 0.5em;
padding-top: 0.1em;
}
::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-end {
border-radius: 0px !important;
}
::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-start {
border-radius: 0px !important;
}
input:disabled {
background: #dddddd;
}
mat-form-field {
min-width: 53.1%;
}

在这里，当我缩小它失去宽度时，我如何用输入宽度修复它

Answer 1

由于宽度在%中。这就造成了问题。尝试

mat-form-field { width: auto; }