Angular

Question

我正在尝试并排显示 angular 中的字段，无论我做什么，它仍然显示如下

下面是我的 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

您需要将组件样式设置为同一行中的某种组件，例如 display: inline 或 display: flex 和 flex-direction: row 或 [=13 的包装器=]!

Answer 2

我稍微重构了你的 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/

Angular - 并排显示字段

Angular - Show fields side by side

html

devextreme

angular7