Angular Material 图标样式答案

【问题标题】：Angular Material icons stylingAngular Material 图标样式
【发布时间】：2017-05-25 20:32:11
【问题描述】：

我正在尝试将控件对齐一行。我尝试了不同的填充/边距。我怎样才能做到这一点？

<div style="margin-top: 10px">
    <button (click)="goToPage(1)" [disabled]="pageNumber==1">
        <md-icon>first_page</md-icon>
    </button>
    <button (click)="previous()" [disabled]="pageNumber==1">
        <md-icon>chevron_left</md-icon>
    </button>
    <input #input type="text" style="width: 30px;height:30px;margin-top:2px" (keyup.enter)="goToPage(input.value)" [(value)]="pageNumber" >

    <button (click)="next()" [disabled]="pageNumber==totalPages">
        <md-icon>chevron_right</md-icon>
    </button>
    <button (click)="goToPage(totalPages)" [disabled]="pageNumber==totalPages">
        <md-icon>last_page</md-icon>
    </button>
    <br />

    <span>Showing page {{pageNumber}} of {{totalPages}} pages.
    </span></div>

【问题讨论】：

标签： html css angular angular-material styles

【解决方案1】：

你有两个问题。

第一个是您的按钮缺少 Angular 材质样式，第二个是您应该在跳到任何 JavaScript 框架（如 Angular）之前学习 CSS。不管怎样，我为你做了一个working demo on Plunker。

我刚刚添加了一些 CSS 选择器，并像这样使用 flexbox：

.wrapper{
    display: flex;
    margin: 1rem;
  }
  .wrapper button, input {
    margin: 0 0.5rem;
  }

【讨论】：