如何将这两个元素布局使用CSS在同一行上？

Question

我在Angular HTML页面中有以下代码，我需要使标签位于下拉列表

<div *ngIf="this.userRole == 'myrequests' " class="col-2" [ngClass]="{ 'd-none': view != 'list' }" id="statusFilter">
      <label class="font-weight-bold text-secondary" for="statusFilter">Filter By Status:</label>
      <select style="display: inline-block ;"
        name="statusFilter"
        [(ngModel)]="statusFilter"
        class="form-control"
        (change)="setStatusFilter()">
        <option  [value]="'none'" disabled selected><strong> Choose Filter: </strong></option> 
        <option   *ngFor="let status of statuses" [value]="status.name">
            {{ status.name }}
        </option>
    </select>
</div>

typescript文件旁边的标签具有数组：

  statuses = [
    { id: 0, name: "All" },
    { id: 1, name: "Approved" },
    { id: 2, name: "Created" },
    { id: 3, name: "Rejected" },
    { id: 4, name: "Cancelled" },
    { id: 5, name: "Approval Pending" },
  ];

所需的布局我想在同一行上，

如本图像所示的当前情况：

Answer 1

对于父母，请使用FlexBox：

display: flex;
align-items: center;

Answer 2

您可以给标签一个显示：内联块；同样。

或者，您可以将标签和两者都放在不同的div中，并给那些Div的一定宽度。