元素被迫向右浮动，但不应该

Question

我希望以下输入字段向左浮动。 我尝试float: left和text-align: left作为父属性。 具有硬编码像素的解决方案（例如padding，margin，position:relative等等也有效，但不是我正在寻找的。

HTML

<ng-container matColumnDef="number">
  <mat-header-cell mat-sort-header arrowPosition="before" class="matTable numberHeaderCell" >
    <input type="text" class="tabHeadInputField numberInputField"/>
  </mat-header-cell>
  <mat-cell class="matTable numberBodyCell">
    {{row.workingNumber}}
  </mat-cell>
</ng-container>

CSS

.matTable.numberHeaderCell {
  border: 1px solid black;
}

.matTable.numberBodyCell {
  text-align: left;
}

.tabHeadInputField.numberInputField {
  float: left;
}

Answer 1

我更改了 arrowPosition="before"到arrowPosition="after"。

这被迫离开箭头位置。