Question

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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>

HTML - 按钮图标麻烦

1 个答案: