jquery - 无法垂直移动 jQuery Spinner 按钮

Question

我正在尝试在 jQuery 微调器的顶部做一些样式设置:

<span class="ui-spinner ui-widget ui-widget-content ui-corner-all" style="height: 14px;">
<input id="testSpinner" class="ui-spinner-input" name="value" aria-valuemin="9" aria-valuemax="1550" autocomplete="off" role="spinbutton" aria-valuenow="9"></input>
    <a class="ui-spinner-button ui-spinner-up ui-corner-tr" tabindex="-1"></a>
    <a class="ui-spinner-button ui-spinner-down ui-corner-br" tabindex="-1"></a>
</span>

我正在尝试堆叠这两个按钮，但我无法将“向上”按钮向上移动和将“向下”按钮向下移动。我可以通过覆盖 ui-spinner-down 类并设置 margin-left: -3.2rem 来向左移动向下按钮，但是 margin-top /margin-bottom 不工作。

jQuery 在 span 标签中设置了 height: 14px;，所以我也很难摆弄它。

目前:

期望:

Answer 1

您想使用 margin-top 和 margin-bottom 而不是 margin-up 和 margin-down

要覆盖 style 属性，您可以使用 "!important"设置高度

height: 10px !important;

如果 margin 不起作用，您可能想改为尝试 position: relative; top: 10px 其中“10px”被调整以使按钮本身位于所需位置。

确保您还设置了适当的 padding 或 line-height 以使箭头在指定高度居中。

另一个注意事项 - 您需要将输入右侧和按钮左侧的 jQuery 的 border-radius 调整为 0。您需要在按钮上制作 border-left: 0 并在底部按钮上制作 border-top: 0