Gleiche Linie Mengenzähler (+/-)

Question

Ich versuche, einige Probleme, wie so ein Mengenzähler zu implementieren

Hier ist, was ich bisher haben (Codepen)

Meine Das Problem ist, dass ich zufälligen Leerraum bekomme und es fühlt sich so an, als würde ich die Elemente umhüllen. Gibt es einen anderen Weg, dies zu tun?

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

Der Raum verursacht wird, wie Sie Inline-Elemente Schlange sind (man denke Wörter in einem Satz - sie haben Räume zwischen ihnen). Sie können den Raum zwischen den Elementen kommentieren Sie den Raum zu entfernen:

<!-- 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