角材料输入并在一个表单域中选择

Question

我希望输入字段和下拉字段位于与左侧相同的区域（我在检查器上执行过此操作）

无论我在样式表中放置什么类，都不会缩小选择菜单的大小。这是我拥有的html代码。

<mat-form-field appearance="outline">
     <mat-label>End Time</mat-label>
     <input matInput type="time" placeholder="HH:MM" id="end_time_hour" [formControl]="timeFormControl">
     <mat-select name="ampm" class="ampm" [(ngModel)]="event.eampm">
          <mat-option value="AM">AM</mat-option>
          <mat-option value="PM">PM</mat-option>
     </mat-select>
</mat-form-field>

Answer 1

您可以将表单字段包装在div中，并为其分配一个类，以便可以嵌套CSS。嵌套CSS的原因是为了避免影响其他控件。我做了这样的事情：

<div class="time-picker-component">
    <mat-form-field appearance="outline">
        <mat-label>End Time</mat-label>
        <input matInput type="time" placeholder="HH:MM" id="end_time_hour" [formControl]="timeFormControl">
     <mat-select name="ampm" class="ampm" [(ngModel)]="event.eampm">
          <mat-option value="AM">AM</mat-option>
          <mat-option value="PM">PM</mat-option>
     </mat-select>
   </mat-form-field>
</div>

，然后在全局某处添加以下CSS：

.time-picker-component .mat-form-field-infix {
  display: inherit;
}

Demo

Answer 2

这是我的解决方案：

<mat-form-field appearance="outline" style="display: flex; flex-direction: row; justify-content: flex-start; align-items: center;"> <--- put style here, im not sure the syntax but this is pseudo code
 <mat-label>End Time</mat-label>
 <mat-select name="ampm" class="ampm" [(ngModel)]="event.eampm">
      <mat-option value="AM">AM</mat-option>
      <mat-option value="PM">PM</mat-option>
 </mat-select>
 <input matInput type="time" placeholder="HH:MM" id="end_time_hour" [formControl]="timeFormControl">

告诉我是否可行

Answer 3

我真的不明白为什么：） 但这确实有效

::ng-deep .mat-select-value {
  font-size: 100%;
}

缺点是，字体大小与输入的::