html - 对齐+和-用于购物篮增量器

我想要像这样的图像中有我的代码

这是一个简单的购物篮增量器。我将边框放置1个，但是我不确定如何对齐+和-并放置边框。我搜索了许多增量器，但找不到图像中的增量器。

有人请给我帮助。

$(function() {

  $(".numbers-row").append('<div class="inc button">+</div><div class="dec button">-</div>');

  $(".button").on("click", function() {

    var $button = $(this);
    var oldValue = $button.parent().find("input").val();

    if ($button.text() == "+") {
  	  var newVal = parseFloat(oldValue) + 1;
  	} else {
	   // Don't allow decrementing below zero
      if (oldValue > 0) {
        var newVal = parseFloat(oldValue) - 1;
	    } else {
        newVal = 0;
      }
	  }

    $button.parent().find("input").val(newVal);

  });

});

input[type=text] {
  float: left;
  width: 40px;
  font: bold 20px Helvetica, sans-serif;
  padding: 3px 0 0 0;
  text-align: center;
}

<!DOCTYPE html>
<html>
<head>
	<title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<form method="post" action="#">
  <div class="numbers-row">
    <input type="text"  id="incrementer" value="1">
  </div>
</form>
</body>
</html>

最佳答案

试试下面的代码：

$(function() {

  $(".numbers-row").append('<div class="inc button">+</div><div class="dec button">-</div>');

  $(".button").on("click", function() {

    var $button = $(this);
    var oldValue = $button.parent().find("input").val();

    if ($button.text() == "+") {
  	  var newVal = parseFloat(oldValue) + 1;
  	} else {
	   // Don't allow decrementing below zero
      if (oldValue > 0) {
        var newVal = parseFloat(oldValue) - 1;
	    } else {
        newVal = 0;
      }
	  }

    $button.parent().find("input").val(newVal);

  });

});

input[type="text"] {
  float: left;
  font: bold 20px Helvetica,sans-serif;
  padding: 5px 11px;
  text-align: left;
  width: 50px;
}
.inc.button {
  border-bottom: 1px solid #ccc;
  border-left: 1px solid #ccc;
  left: 57px;
  padding: 0 6px 0 8px;
  position: absolute;
}
.dec.button {
  border-left: 1px solid #ccc;
  left: 57px;
  padding: 0 10px;
  position: absolute;
  top: 25px;
}

<!DOCTYPE html>
<html>
<head>
	<title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<form method="post" action="#">
  <div class="numbers-row">
    <input type="text"  id="incrementer" value="1">
  </div>
</form>
</body>
</html>

关于html - 对齐+和-用于购物篮增量器，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39345361/