角度-並排顯示字段

Question

我正在嘗試並排顯示成角度的場，無論我做什么，它仍然顯示如下

下面是我的html組件

<div id="report-prj-search">
   <div class="dx-fieldset" >
      <div class="dx-field">
         <div class="dx-field-label">ShipTo Account</div>
         <div class="dx-field-value">
            <dx-select-box [dataSource]="ShipmentList" displayExpr="customer_shipto_name"  (onValueChanged)="onValueChanged($event)" ></dx-select-box>
         </div>
      </div>
      <div class="dx-field">
         <div class="dx-field-label">Purchase Order</div>
         <div class="dx-field-value">
            <dx-select-box [dataSource]="purchaseOrder" displayExpr="customer_purchase_order" ></dx-select-box>
         </div>
      </div>
      <div class="dx-field">
         <dx-button (onClick)="click($event)">Filter</dx-button>
      </div>
   </div>
</div>

Answer 1

我已經稍微重構了HTML，以便可以使用CSS Flexbox：

<div id="report-prj-search">
  <div class="dx-fieldset flex-column">
    <div class="flex-row-container">
      <div class="dx-field flex-row">
        <div class="dx-field-label">ShipTo Account</div>
        <div class="dx-field-value">
          <select></select>
        </div>
      </div>
      <div class="dx-field flex-row">
        <div class="dx-field-label">Purchase Order</div>
        <div class="dx-field-value">
          <select></select>
        </div>
      </div>
    </div>
    <div class="dx-field">
      <button (onClick)="click($event)">Filter</button>
    </div>
  </div>
</div>

在CSS中使用Flexbox：

.dx-fieldset.flex-column  {
  display: flex;
  flex-direction: column;
}
.flex-row-container {
  display: flex;
  flex-direction: row;
}
.dx-field.flex-row {
  display: flex;
  flex-direction: row;
}

這是我過去使用過幾次的flexbox指南：

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

您需要將組件樣式設置為同一行中的某種組件，例如display: inline或display: flex和flex-direction: row或display: inline-block的包裝器！