时间戳

首页 > 解决方案 > 字段对齐未按预期工作

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;
}

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

在此处输入图像描述

标签： htmlcssangularangular7

解决方案

原因

所以我发现问题实际上不是因为你的 CSS（尽管float在 flex 容器中使用仍然是错误的，所以你可以删除它），而纯粹是因为你的库使用的主题。

从组件元素的名称来看，我假设您正在使用 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

推荐阅读