Divのボタンとテキストフィールドの調整

Question

私はInteger Number Fieldを開発しようとしています。私はそれが働いているが、スタイリングは多少問題を作り出している。私はGlyphicons PlusとMinusを使ってインクリメントとデクリメントの機能を行い、テキストフィールドを入力してInteger番号を表示しています。

divの高さにマイナスグリフィコンを調整できません。 作業コード：http://jsfiddle.net/nvarun123/fv4jxo4t/26/

HTMLコード：

<div> 
     <a> 
     <button (click)="decrement()" class="btn btn-primary"> 
     <span><i class="glyphicon glyphicon-minus" ></i></span> 
     </button> 
     </a> 
     <input type="text" style="width:45%;" [(ngModel)]="count"> 
     <a> 
     <button (click)="increment()" class="btn btn-primary" style="float: right;"> 
     <span><i class="glyphicon glyphicon-plus" ></i></span> 
     </button> 
     </a> 
    </div> 

CSSコード：

div { 
     position:relative; 
     border: 1px solid #CACEDB; 
     width: 162px; 
     height:38px; 
     overflow: hidden; 
     white-space: nowrap; 
     border-radius:3px; 
     } 
    input{ 
     text-align: center; 
     height:100%; 
     width:100%; 
     border:none; 
    } 
    input:focus{ 
     outline: none; 
    } 
    button 
    { 
     -webkit-appearance: none; 
     outline: none; 
     height:100%; 
     border:none; 
     vertical-align:middle; 
    } 

button:active { 
    background-color: #015191; 
} 

Answer 1

あなたのマイナスボタンは、フロートを必要とする：左：

<div> 
    <a> 
     <button (click)="decrement()" class="btn btn-primary" style="float: left;"> 
      <span><i class="glyphicon glyphicon-minus" ></i></span> 
     </button> 
    </a> 
    <input type="text" style="width:45%;" [(ngModel)]="count"> 
    <a> 
     <button (click)="increment()" class="btn btn-primary" style="float: right;"> 
      <span><i class="glyphicon glyphicon-plus" ></i></span> 
     </button> 
    </a> 
</div> 

Answer 2

をすでにしているとおりブートストラップを使用すると、0の横にinput-groupクラスを使用できます。私も<a>タグであなたの<button>をラップしないことをお勧めします

http://codepen.io/rkieru/pen/JKOyom

<div class="input-group"> 
    <span class="input-group-btn"><button class="btn btn-primary" type="button"><i class="fa fa-minus"></i></button></span> 
    <input type="text" class="form-control" placeholder="Integer"> 
    <span class="input-group-btn"><button class="btn btn-primary" type="button"><i class="fa fa-plus"></i></button></span> 
</div> 

：以下CodePenのリンクを参照します。 <button>はJSイベントで単独で機能し、コードはよりクリーンです。