Question

我正在尝试开发一个整数数字字段。我有它的工作，但造型有点造成问题。我正在使用Glyphicons Plus和Minus作为递增和递减功能，输入文本字段以显示整数。

我无法将Minus Glyphicon调整到div的高度。工作代码：http://jsfiddle.net/nvarun123/fv4jxo4t/26/

HTML code：

 <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

由于您已经在使用Bootstrap，因此您可以在input-group旁边使用input-group-btn课程。请参考下面的CodePen链接：

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>

我还建议您不要将<button>包裹在<a>标记中。 <button>可以自己在JS事件上运行，代码更清晰。

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

2 个答案: