Angular - 并排显示字段答案

【问题标题】：Angular - Show fields side by sideAngular - 并排显示字段
【发布时间】：2019-12-25 04:00:28
【问题描述】：

我试图并排显示有角度的字段，无论我做什么，它仍然显示如下

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

【问题讨论】：

标签： html angular angular7 devextreme

【解决方案1】：

您需要将组件设置为同一行中的某种组件，例如display: inline 或display: flex 和flex-direction: row 或display: inline-block 的包装器！

【讨论】：

我是前端开发新手，能否举个例子
尝试制作前两个 dx 字段而不是

【解决方案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/

【讨论】：