角材料图标造型

Question

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

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

Answer 1

你有两个问题，

第一个是你的按钮丢失角材料的造型，第二个是你要跳转到任何JavaScript框架之前了解CSS像角反正我做了一个Plunker工作演示给你：

检查出来：{{HERE}}

我只是增加了一些CSS选择，我用Flexbox的就是这样的：

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

我希望这可以帮助，如果您还有任何问题，只是让我知道