我是编程的新手,所以不能得到一个简单的东西。 我有两个带“+”和“ - ”的按钮,以及它们之间的值,它们会改变。问题是当添加新的小数位时按钮会分开。 我的问题是:我可以使用什么来固定一定距离的按钮?
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>
答案 0 :(得分: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>
答案 1 :(得分:0)
您可以尝试调整封闭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>