相同的线数量计数器（+/-）

Question

我在尝试实施数量计数器时遇到了一些麻烦

这是我到目前为止（Codepen）

我的问题是我一直在获得随机的空白区域，感觉我对包装元素的方式效率低下。还有其他方法可以做到吗？

HTML

<!-- Quantity -->
<div class="quantity-number-v2 clearfix">
  <div class="quantity-wrapper">
    <i class="add-down add-action fa fa-minus"></i>
    <input id="prodQuantity" type="text" name="quantity" value="700" />
    <i class="add-up add-action fa fa-plus"></i>
  </div>
  <div id="stock" class="text-center"></div>
</div>
<!-- /Quantity -->

SCSS

.quantity-number-v2{
  margin: 50px;
  #prodQuantity{
    width: 60px;
    height: 30px;
    border: 1px solid #222;
  }
  i{
    padding: 6.8px 10px;
    border: 1px solid #222;
  }
}

Answer 1

当你排列内联元素时会产生空间（想想一句话中的单词 - 它们之间有空格）。您可以注释掉元素之间的空格以删除空格：

<!-- Quantity -->
<div class="quantity-number-v2 clearfix">
  <div class="quantity-wrapper">
    <i class="add-down add-action fa fa-minus"></i><!--
    --><input id="prodQuantity" type="text" name="quantity" value="700" /><!--
    --><i class="add-up add-action fa fa-plus"></i>
  </div>
  <div id="stock" class="text-center"></div>
</div>
<!-- /Quantity -->

Updated Pen