Padding der Eingabe-Checkbox und vertikale Ausrichtung mit den Tasten

Question

Ich versuche, ein Eingabe-Kontrollkästchen vertikal mit der Schaltfläche rechts auszurichten.

Hier ist ein Beispiel dafür, was ich für Moment bekommen:

Wie Sie mit ihrer Taste sehen können, sind die zwei Kontrollkästchen auf der linken Seite versetzt (ein wenig zu viel hoch im Vergleich zu den Knöpfen) bei rechts (die erste Eingabe ist "Player Computer" und die zweite ist "Player1 Player2").

UPDATE:

Lösung von Minal Chauhan gegeben ist perfekt. Grüße

Answer 1

Entfernen Sie einfach Polsterung von button-group Klasse.und vertical-align: middle; and display: inline-block; in Checkbox hinzufügen und unter CSS Code hinzu:

#formGame { 
 
    padding-left: 0; 
 
    pointer-events: all; 
 
} 
 
#formGame input[type="checkbox"] { 
 
    vertical-align: middle; 
 
    display: inline-block; 
 
} 
 
label { 
 
    padding-left: 3px; 
 
} 
 
.btn-group{ 
 
    position: relative; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 
button.btn { 
 
    padding-left: 10px; 
 
} 
 

 
.btn-classic { 
 
    color: black; 
 
    background-color: white; 
 
} 
 

 
.btn-inverse { 
 
    color: white; 
 
    background-color: black; 
 
} 
 

 
#Player1VsPlayer2 { 
 
    margin-top: 10px; 
 
    margin-left: 12px; 
 
} 
 

 
#PlayerVsComputer { 
 
    margin-top: 15px; 
 
    margin-left: 12px; 
 
} 
 

 
#PlayableHits { 
 
    margin-top: 10px; 
 
    margin-left: 32px; 
 
}

<form id="formGame"> 
 
    <div id="PlayerVsComputer" class="checkbox"> 
 
    <label><input type="checkbox" class="game" style=""/> 
 
    <div class="btn-group" role="group"> 
 
     <button type="button" class="btn btn-inverse btn-xs"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Player</font></font></button> 
 
     <button type="button" class="btn btn-classic btn-xs"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Computer</font></font></button> 
 
    </div> 
 
    </label> 
 
    </div> 
 
    <div id="Player1VsPlayer2" class="checkbox"> 
 
    <label><input type="checkbox" class="game"> 
 
    <div class="btn-group" role="group"> 
 
     <button type="button" class="btn btn-inverse btn-xs" disabled=""><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Player 1</font></font></button> 
 
     <button type="button" class="btn btn-classic btn-xs" disabled=""><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Player 2</font></font></button> 
 
    </div> 
 
    </label> 
 
    </div> 
 
</form>

Answer 2

Bitte folgende CSS Änderungen vornehmen.

Zuerst entfernen Sie die Polsterung von button-group Klasse.

.btn-group{ 
    padding-top: 0px; 
} 

Dann nutzen Sie die CSS3 Lösung display:flex. Wie so.

form label{ 
    display:flex; 
    align-items:center; 
} 

Answer 3

Ein anderer Weg ist

ersetzen

<input type="checkbox" class="game"> 

Um

<span class="btn-group"><input type="checkbox" class="game"></span> 

Answer 4

1. Das gewünschte Verhalten durch die Anwendung vertical-align auf die Checkbox erreicht werden kanninput Elemente, zB:

input.game { 
    vertical-align: middle; 
} 

2. Die padding-top Eigenschaft auf den verschachtelten .btn-group Elemente deklariert werden, müssen entfernt werden, zum Beispiel:

#formGame .btn-group { 
    padding-top: 0px; 
} 

3. Stattdessen eher Versatzabstand zwischen Geschwisterelementen durch Deklarieren einer margin-Eigenschaft auf den enthaltenden label Elementen, zB:

#formGame label { 
    margin-bottom: 10px; 
} 

Hinweis: durch das eindeutigen ID-Attribut des Formularelementes mit (#formGame) als Basiswähler für gemeinsame Elemente (label) oder Rahmenklassen (.btn-group) können wir sicherstellen, dass diese Änderungen nur für die vorgesehenen Elemente anwenden .

Answer 5

Entfernen Sie die Füll- und Randeigenschaften und verwenden Sie stattdessen vertical-align.

Answer 6

Sie haben einige unnötige CSS hinzugefügt, die das Problem zu schaffen. Dies wird Ihnen helfen zu bekommen, was Sie suchen, und es wird auch in alten Browsern funktionieren.

.btn-group { 
    padding-top: 0; 
    vertical-align: text-bottom; 
} 

/* Get rid of vertical align on elements inside button */ 
button font { 
    vertical-align: initial !important; 
} 

/* Restore whitespace removed by padding-top: 0 */ 
form#formGame > div { 
    margin-top: 10px; 
    margin-bottom: 10px; 
}