Элемент вынужден плавать правильно, но не должен

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

I изменено arrowPosition="before" на arrowPosition="after".

Это вынудило отойти от положения стрелки.