字段对齐未按预期工作

Question

我正在尝试在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;
}

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

Answer 1

原因

所以我发现问题实际上不是由于您的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