字段对齐未按预期工作

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，并且从您的屏幕截图来看，您似乎正在使用他们的（相当新的）material 主题之一，blue light看起来像。

问题是他们在 CSS 和 <dx-field> 元素中做了什么事实证明，material 主题中的 CSS 包含：

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

这很好，并为放置在其下的字段提供了一些 space，但还包含：

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

因此，最后一个 <dx-field> 的边距将被覆盖为 0。如果字段按列顺序放置，这并没有错（这可能是他们假设的始终如此)，但在你的例子中，你在一个有行方向的弹性容器中，所以失去边距看起来很奇怪。

修复

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

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

或者，您可以只删除所有元素的底部边距：

dx-field {
    margin: 0;
}

有趣的是，默认的 Devextreme 主题没有这个问题，所以它可能有些奇怪 Material 主题指南

字段对齐未按预期工作

Alignment of fields not working as expected

html

css

angular

angular7

原因

修复