重新定位材料标签控件答案

【问题标题】：Re-positioning an Material label control重新定位材料标签控件
【发布时间】：2019-04-30 14:03:59
【问题描述】：

我在使用 HTML 标签元素定位文本块时遇到问题。该元素包含了一个 mat-form-field 输入控件，并且屏幕截图显示标签文本在输入控件底部对齐，而它应该在中心对齐。

如您所见，Trader Reference [07] 文本太低，我需要将其向上移动几个像素，但我尝试的一切都失败了。

我应该提到我正在尝试使用 Angular Material 控件

代码如下

<div class = "wrapper">
  <div>
  <mat-accordion>
  <mat-expansion-panel (opened)="panelOpenState = true"
                       (closed)="panelOpenState = false">
    <mat-expansion-panel-header [collapsedHeight]="customCollapsedHeight" [expandedHeight]="customExpandedHeight">
      <mat-panel-title>
     <h4> Declaration Type</h4>
      </mat-panel-title>
    </mat-expansion-panel-header>
    <div class="field">
        <label class= "field-label">Decln Type [01]:
            <mat-form-field>
                <mat-select class="declaration-type-combobox">
                  <mat-option *ngFor="let declarationType of declarationTypes" [value]="declarationType.value">
                    {{declarationType.value}}
                  </mat-option>
                </mat-select>
              </mat-form-field>
        </label>
        <label class= "field-label">Badge Codes:
          <mat-form-field>
              <mat-select class="badge-codes-combobox">
                <mat-option *ngFor="let badge of badges" [value]="badge.code">
                  {{badge.code}} -  {{badge.name}}
                </mat-option>
              </mat-select>
            </mat-form-field>
      </label>
    </div>
    <div class="field">
        <div>
            <label>Trader Referecne [07]:
            <mat-form-field>
                <input matInput>
              </mat-form-field>
            </label>
          </div>
  </div>
    </mat-expansion-panel>
</mat-accordion>
</div> <!--End wrapper-->
</div>

这是CSS

 .wrapper {
  margin-top: 30px;
  margin-left: 30px;
}

/* contains a label and a value */
.field {
  display: flex;
  margin: 0 0 0 0;
}

.field-label {
  width: 35%;
}

.field-value {
  width: 60%;
  float: right;
}

.field label + label /*label after another label */
 {
  margin-left: 30px;
}

.declaration-type-combobox {
  width: 400px;
  max-width: 400px;
  font-size: 12px;
  border: #673ab7 2px solid;
  border-radius: 5px;
  height: 10px;
  padding: 9px;
}

.badge-codes-combobox {
  width: 200px;
  max-width: 200px;
  font-size: 12px;
  border: #673ab7 2px solid;
  border-radius: 5px;
  height: 10px;
  padding: 9px;
}

.form-field {
  width: 380px;
  max-width: 380px;
  border: #673ab7 2px solid;
  border-radius: 5px;
  font-size: 12px;
  height: 20px;
  max-height: 20px;
}

::ng-deep .mat-select-panel mat-option.mat-option {
  height: unset;
}

::ng-deep .mat-option-text.mat-option-text {
  word-wrap: break-word;
  white-space: pre-line;
  padding: 5px;
  margin: 2px;
  line-height: 15px;
}

::ng-deep .mat-form-field-underline {
  display: none;
}

.mat-expansion-panel-header.mat-expanded {
  background: #673ab7;
}

input {
  border: none;
  background: none;
  padding: 0;
  text-align: left;
  font-size: 12px;
  border: #673ab7 2px solid;
  border-radius: 5px;
  height: 9px;
  padding: 9px;
  width: 200px;
}

【问题讨论】：

标签： html css angular angular-material

【解决方案1】：

分配给输入的matInput 指令绝对是问题的原因；从输入中删除它可以解决对齐问题。 mat-input-element 类中有一些东西应用于负责的输入......当我从开发工具的输入中删除该类时，问题也消失了。

我已经覆盖了该类中的所有样式，但似乎无法确定找出导致这个问题的那个类的独特之处......不幸的是，没有深入研究图书馆的来源，我不知道什么根本问题在于mat-input-element 类。

您可能会按照这些思路探索一些方法，将您的标签与 matInput 解除关联，作为替代解决方案。

<div class="field">
        <pre style="padding-top:8px; font: 400 14px/20px Roboto,Helvetica Neue,sans-serif;">Trader Referecne [07]: </pre>
        <div>
            <mat-form-field>
                <input matInput>
              </mat-form-field>
          </div>
  </div>

【讨论】：