无法使用内联的div对齐引导按钮

Question

我写了一个小的Angular指令，它为数字生成一个步骤输入控件。我使用Bootstrap按钮（xs）作为inc/dec控件，并以某种方式设法模拟外容器上的假焦点。问题是垂直居中跨度和输入在一个稳定的布局，缩放时保持在一起。

这是该指令的模板：

<ng-form name="stepNumberForm" novalidate \> 
    <div class="step-number" 
     tabindex="{{$id}}" 
     ng-class="{\'fake-focus\': fakeFocus}" 
     ng-keyup="keyControl($event)"> 
     <span 
      ng-disabled="incDisable" 
      class="btn-primary" 
      ng-click="inc()"> 
      <i class="glyphicon glyphicon-plus "> 
      </i> 
     </span> 
     <input type="text" 
       ng-style="setWidth()" 
       name="value" 
       ng-keyup="keyControl($event)" 
       ng-model="value" 
       ng-focus="selectAll($event)" 
       ng-blur="validate()" 
       class="input-xs"> 
     <span 
      ng-disabled="decDisable" 
      class="btn-primary" 
      ng-click="dec()"> 
      <i class="glyphicon glyphicon-minus"> 
      </i> 
     </span> 
    </div> 
</ng-form> 

我使用的CSS是：

input::-webkit-outer-spin-button, 
input::-webkit-inner-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
} 
.step-number{ 
    border:1px solid; 
    display:inline-block; 
    -moz-user-select: none; 
    -webkit-user-select: none; 
    -ms-user-select:none; 
    user-select:none; 
    border-radius:4px; 
} 
.input-xs { 
    font-size: 1em; 
    text-align: center; 
    border:none; 
    line-height: 1em; 
    height:1.1em; 
    vertical-align: middle; 

} 

.step-number span{ 
    display: inline; 
    height: 100%; 
    width: 18px; 
    margin-bottom: 1px; 
    margin-top: 1px; 
    text-align: center; 
} 

.step-number span:first-child{ 
    margin-left: 1px; 
    border-top-left-radius: 2px; 
    border-bottom-left-radius: 2px; 
} 
.step-number span:last-child{ 
    margin-right: 1px; 
    border-top-right-radius: 2px; 
    border-bottom-right-radius: 2px; 
} 

.input-xs:focus{ 
    outline:none; 
} 
.step-number:focus{ 
    outline:none; 
    border-color: rgba(82, 168, 236, 0.8); 
    outline: 0; 
    outline: thin dotted \9; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6); 
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6); 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6); 

} 

.fake-focus{ 
    border-color: rgba(82, 168, 236, 0.8); 
    outline: 0; 
    outline: thin dotted \9; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6); 
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6); 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6); 
} 
.step-date{ 
    display: inline-block; 
} 

整个工程可在​​。 还有一个working demo并通过$ bower install stepper

安装我将不胜感激伸出援助之手的任何人发现这个有用它的可用。欢迎所有贡献者使这个小指令看起来不错。这意味着：垂直居中输入，垂直居中的按钮，元素内部的边框填充，跨浏览器稳定和缩放稳定。

Answer 1

我在跨度或具有+标志按钮元素添加了这些CSS规则：

padding: 1px; 
position: relative; 
top: -1px; 

这似乎是工作得很好（我也尝试调整大小视口 - 通过Firefox测试）。

这里是结果的截图（记得，只适用于加号）

你可以添加上述规则一类.stepper-buttons并将其添加到跨度或按钮元素（与两者一起测试）。

让我知道这是否适合你。