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

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;
}

演示