HTML - 按钮中的图标麻烦

Question

出于某种原因，我的按钮内的图标有一半在它们外面，尽管里面肯定有足够的空间容纳它们。为什么会这样，我该如何解决？此外，在我的 CSS 中，我将按钮设置为蓝色，但只要它们被禁用，按钮就是白色的。我怎样才能让它们在禁用时不改变颜色？谢谢!

tfoot,
thead {
  background-color: blue;
  color: white;
}

i {
  color: white;
  vertical-align: middle;
}

button {
  background-color: blue;
}

.footertext {
  float: right;
  padding-left: 10px;
  padding-right: 10px;
}

<td colspan="6">
  Requests:
  <button [disabled]="!isNextValid()" class="form-control" style="width: 50px; height: 25px; float: right;" (click)="nextEmployee()"><i class="fa fa-caret-right fa-2x" aria-hidden="true"></i></button>
  <label style="float: right;">{{selectedEmployee+1}} of {{empInfo.length}}</label>
  <button [disabled]="!isPreviousValid()" class="form-control" style="width: 50px; height: 25px; float: right;" (click)="previousEmployee()"><i class="fa fa-caret-left fa-2x" aria-hidden="true"></i></button>
</td>

Answer 1

这是因为您在按钮元素上使用了固定宽度。使用填充调整大小，而不是固定的。这将允许您的按钮根据其内容适当缩放。这也将使标签和图标在按钮中正确居中。

像这样:

<button [disabled]="!isNextValid()" class="form-control" style="padding: 15px 30px; float: right;" (click)="nextEmployee()"><i class="fa fa-caret-right fa-2x" aria-hidden="true"></i></button>