Javascript-Taste, onclick Funktion und Ausrichtung

Question

Ich versuche, ein Javascript-Element in meiner Laravel-Website für die Verringerung/Erhöhung der Anzahl der Schaltflächen zu erstellen. Ich möchte, dass das Quantity-Feld in allen Eingabe-Instanzen "0" automatisch auffüllt, und dann müssen die Schaltflächen zum Erhöhen und Verringern natürlich addiert oder subtrahiert werden.

Allerdings kann ich nicht die Eingabe mit 0 beim Laden der Seite zu füllen, und auch die Eingabe scheint etwas darüber zu haben, dass die Schaltfläche "Hinzufügen" nach unten drückt.

Hier ist meine Quellcode:

<div> 
<button class="remove-button md-btn" style="width: 33%; min-width: 0; float: left; height: 30px;"><i class="material-icons">remove</i></button> 
<input type="text" class="md-input" id="{{ $quantity_id }}" name="count" onClick="this.setSelectionRange(0, this.value.length);" style="width: 33%; min-width: 0; float: left; margin: 0; text-align: center; height: 30px;" /> 
<button class="add-button md-btn md-btn-success" style="width: 33%; min-width: 0; float: left; height: 30px;"><i class="material-icons">add</i></button> 
</div> 

Gibt es einen offensichtlichen Grund (ich bin in JS nicht bewandert) Dass die buttone geschoben werden nach unten und mein Feld ist bevölkert nicht mit 0 oder Erhöhung/abnehmend?

Answer 1

Sie müssen die folgende Art auf alle Ihre Schaltflächen hinzufügen:

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
-moz-box-sizing: border-box; /* Firefox, other Gecko */ 
box-sizing: border-box;   /* Opera/IE 8+ */ 

Dadurch wird sichergestellt, dass padding die Breite einer Taste wirkt sich nicht auf, so dass width: 33%; eigentlich nicht drehen in width: 33% + 14px; usw.

an einem Eingang einen Standardwert geben, können Sie entweder value='0' oder placeholder='0'

Der Wert Attribut wird einen tatsächlichen abrufbaren Wert zuweisen, während Platzhalter werden zeige nur einen Wert an, ohne ihn tatsächlich zuzuweisen. Siehe das Beispiel here.