無法使用內聯的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並將其添加到跨度或按鈕元素（與兩者一起測試）。

讓我知道這是否適合你。