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

【问题标题】：Adjusting Buttons and Text Field in a Div调整 Div 中的按钮和文本字段
【发布时间】：2016-07-12 16:45:04
【问题描述】：

我正在尝试开发一个整数字段。我已经让它工作了，但样式有点造成问题。我正在使用 Glyphicons Plus 和 Minus 作为增量和减量功能，并输入文本字段以显示整数。

我无法将减号字形图标调整为 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;
}

【问题讨论】：

jsfiddle.net/fv4jxo4t/27 我所做的只是删除了 div 上的 height:38px ，现在它是相同的高度。

标签： html css button

【解决方案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>

【讨论】：

【解决方案2】：

由于您已经在使用 Bootstrap，您可以在 input-group-btn 旁边使用 input-group 类。参考下面的 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 事件，代码更简洁。

【讨论】：