html - 字段对齐未按预期工作

我正在尝试将Angular html页面中的字段对齐，但无法按预期工作。 html文件如下

<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">
          <dx-select-box [dataSource]="ShipmentList" displayExpr="customer_shipto_name"  (onValueChanged)="onValueChanged($event)" ></dx-select-box>
        </div>
      </div>

      <div class="dx-field flex-row">
        <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>

    <div class="dx-field">
      <dx-button (onClick)="click($event)">Filter</dx-button>
    </div>
  </div>
</div>

.scss就像

.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;
  align-items: center;
}
.dx-select-box {
  width: 200vw;
  height: 2vw;
  float: left;
}

但是文件没有正确对齐，我无法调整选择框大小/标签大小，对齐方式也如下图所示

最佳答案

原因

因此，我发现问题实际上并不是由于您的CSS（尽管在flex容器中使用float仍然是错误的，因此您可以将其删除），但这完全是由于您的库使用了主题。

从组件元素的名称来看，我假设您正在使用Devextreme，并且从查看屏幕截图来看，您似乎正在使用它们的（相当新的）实质主题之一，看起来像是蓝灯。

问题是它们在CSS中使用<dx-field>元素做什么
事实证明，来自实质主题的CSS包含：

.dx-field {
  margin: 0 0 30px 0;
}

很好，并为其下方的字段留出一些空间，但其中还包含：

.dx-field:last-of-type {
    margin: 0;
}

因此，最后一个<dx-field>的边距将被覆盖为0。如果字段以列顺序放置（这可能是他们一直假设的情况），这不是错误的，但是在您的情况下，您位于具有行方向的flex容器中，因此丢失该边距看起来很奇怪。

修复

要修复它，您可以更改最后一个元素css，例如：

dx-field:last-of-type {
    margin: 0 0 30px 0;
}

另外，您可以删除所有元素的底边距：

dx-field {
    margin: 0;
}

有趣的是，默认的Devextreme主题没有这个问题，因此可能是一些奇怪的Material Theme Guidelines