html - 调整 Div 中的按钮和文本字段

Question

我正在尝试开发一个整数字段。我已经开始工作了，但是样式在某种程度上造成了问题。我使用 Glyphicons Plus 和 Minus 来充当递增和递减功能，并使用输入文本字段来显示整数。

我无法将 Minus Glyphicon 调整为 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

你的减号按钮需要一个 float:left :

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