使用 CSS 在输入字段旁边定位按钮答案

【问题标题】：Positioning buttons beside the input field using CSS使用 CSS 在输入字段旁边定位按钮
【发布时间】：2020-11-10 08:40:53
【问题描述】：

我想设置输入字段旁边按钮的位置，但加号按钮需要在减号按钮上方。所以类按钮的高度将与输入字段相同。你能帮我解决这个问题吗？谢谢！

Current result of code

    <body>
    <div class="input">
        <input name="number" type="text" readonly value="0" class="arrowsChange">
      </div>


      <script>
        var inputNumber = document.querySelector('.arrowsChange');
        inputNumber.insertAdjacentHTML('afterend', '<div class="buttons"><button onclick="inc()">+</button><button onclick="dec()">-</button></div>');

          function inc() {
            let number = document.querySelector('.arrowsChange');
            number.value = parseInt(number.value) + 1;
            }

            function dec() {
            let number = document.querySelector('.arrowsChange');
                if (parseInt(number.value) > 0) {
                number.value = parseInt(number.value) - 1;
            }
            }
      </script>
</body>

【问题讨论】：

标签： css button position

【解决方案1】：

您可以在输入包装器上使用display: flex; 规则。然后在你的按钮包装上display: grid;。但是，height 中的输入会更高。我让你弄清楚如何解决剩下的期望。

查看我的实现

.input{
  display: flex;
}
.buttons{
  display: grid;
}
.buttons button {
    height: 15px;
    line-height: 9px;
}

<body>
    <div class="input">
        <input name="number" type="text" readonly value="0" class="arrowsChange">
      </div> 
      <script>
        var inputNumber = document.querySelector('.arrowsChange');
        inputNumber.insertAdjacentHTML('afterend', '<div class="buttons"><button onclick="inc()">+</button><button onclick="dec()">-</button></div>');

          function inc() {
            let number = document.querySelector('.arrowsChange');
            number.value = parseInt(number.value) + 1;
            }

            function dec() {
            let number = document.querySelector('.arrowsChange');
                if (parseInt(number.value) > 0) {
                number.value = parseInt(number.value) - 1;
            }
            }
      </script>
</body>

您也可以尝试学习Bootstrap，这是一个前端框架，可帮助您构建响应式和移动优先的网站。

【讨论】：

谢谢，我知道这样做。我需要使按钮更小，并且“+”按钮位于“-”按钮上方。当您输入类型编号时，有类似箭头的东西。这只是我必须应用这个的大项目的例子:)。
这里有一个例子：.buttons button { height: 15px; line-height: 9px; } Otherelse，你有input type='number'，它添加箭头来让你的数字更高或更低。 See this link
我无法更改类型，因为它是 symfony 项目的一部分，它会生成表单字段。我只需要设置具有整数作为输入值的输入字段的样式，并且必须将此按钮放在输入字段旁边。
好的，正如我所说，尝试修改您的按钮height，然后调整line-height 以将您的加号和减号字体定位到您的按钮中。它在工作吗？（我修改了 SO fiddle 以获得完整的代码）