Question

我在用HTML Label元素定位文本块时遇到问题。该元素包装了一个mat-form-field输入控件，并且如屏幕截图所示，当标签文本应居中对齐时，其标签文本在输入控件的底部对齐。

正如您所看到的，《交易者参考》 [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;
}

Answer 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>

重新放置材料标签控件

1 个答案: