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

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>

原文由 Luis Liz 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

演示

原文由 Awad Maharoof 发布，翻译遵循 CC BY-SA 4.0 许可协议

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">

告诉我它是否有效

原文由 Cuong Hoang 发布，翻译遵循 CC BY-SA 4.0 许可协议