2017-05-25 114 views
-2

我想對齊一行中的控件。我嘗試了不同的填充/邊距。我怎樣才能做到這一點?角材料圖標造型

enter image description here

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

檢查出我的回答如下,如果您有任何問題,我可以幫助! –

回答

0

你有兩個問題,

第一個是你的按鈕丟失角材料的造型,第二個是你要跳轉到任何JavaScript框架之前瞭解CSS像角反正我做了一個Plunker工作演示給你:

檢查出來:{{HERE}}

enter image description here

我只是增加了一些CSS選擇,我用Flexbox的就是這樣的:

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

我希望這可以幫助,如果您還有任何問題,只是讓我知道