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

整个项目可在github获得。还有一个working demo，可以通过$ bower install stepper

进行安装

我非常感谢任何发现这个有用的人的帮助。欢迎所有贡献者使这个小指令看起来很好。这意味着：输入垂直居中，按钮垂直居中，元素内部有1px边框填充，跨浏览器稳定且缩放稳定。

Answer 1

我在 span 或按钮元素中添加了这些CSS规则，其中包含+符号：

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

它似乎工作正常（我也尝试调整视口大小 - 使用Firefox测试）。

以下是结果的截图（记住，仅适用于加号）
solution-screenshot

您可以将上述规则添加到课程.stepper-buttons，并将其添加到范围或按钮元素（使用两者进行测试）。

如果这对您有用，请告诉我。

无法使用内联Bootstrap按钮在div中垂直对齐

1 个答案: