Question

我是编程的新手，所以不能得到一个简单的东西。我有两个带“+”和“ - ”的按钮，以及它们之间的值，它们会改变。问题是当添加新的小数位时按钮会分开。我的问题是：我可以使用什么来固定一定距离的按钮？

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>

Answer 2

您可以尝试调整封闭div中的三个元素并将其宽度设置为您感觉最佳。我将其设置为25%。然后使用justify-content: space-between正确划分元素。查看https://css-tricks.com/snippets/css/a-guide-to-flexbox/了解CSS flexbox的更多技巧。

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>
<div style="width: 25%; display: flex; justify-content: space-between;">
    <button class="button" id="minusS" >-</button>

    <span class="countSession"></span>

    <button class="button" id="plusS" >+</button> 
</div>

如何围绕数字制作静态按钮？

2 个答案: