javascript - 如何在数字周围制作静态按钮？

Question

我是编程新手，所以可能无法理解简单的事情。 我有 2 个带有“+”和“-”的按钮以及它们之间更改的值。问题是当添加新的小数位时，按钮会分开。 我的问题是:我可以用什么将按钮固定在一定距离处？

var valueS = $('.countSession')[0];
valueS.innerHTML = '0';

var valueS = $('.countSession')[0];
$("#minusS").click(function() {
  valueS.innerHTML--;
  if (valueS.innerHTML < 1) {
    valueS.innerHTML = '0';
  }
})


$("#plusS").click(function() {
  valueS.innerHTML++;
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button" id="minusS" >-</button>

<span class="countSession"></span>

<button class="button" id="plusS" >+</button>

Answer 1

使用 CSS，你可以给它一个不太可能超过的固定宽度。因此，例如，如果您的应用程序支持的最大值是 1000，请为类提供足够的空间以允许 1000。

在下面的代码片段中，除了宽度之外，我还为它提供了 inline-block 的显示属性，以确保它获得分配的宽度，然后是 text-align: center 确保数字停留在可用区域的中心。

var valueS = $('.countSession')[0];
valueS.innerHTML = '0';

var valueS = $('.countSession')[0];
$("#minusS").click(function() {
  valueS.innerHTML--;
  if (valueS.innerHTML < 1) {
    valueS.innerHTML = '0';
  }
})


$("#plusS").click(function() {
  valueS.innerHTML++;
})

.countSession {
  width: 30px;
  display: inline-block;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button" id="minusS">-</button>

<span class="countSession"></span>

<button class="button" id="plusS">+</button>