角度のある材質のアイコンスタイリング

Question

コントロールを一列に整列しようとしています。私は別のパディング/余白を試した。これどうやってするの？あなたが最初のものは、あなたのボタンは、角材料スタイリングが欠落している2つ目は、あなたが任意のJavaScriptのフレームワークにジャンプする前にCSSを学ばなければならないということであるということである二つの問題、

を持って

<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

角度のようなとにかく私はあなたのためにPlunkerに取り組んでデモを行った。

それをチェックアウト：{{}} HERE

私はほんの数CSSセレクタを追加し、私はちょうどこのようフレキシボックスを使用：

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

私はこのことができますし、あなたはまだ質問があればちょうど私が私をチェックアウト