wie eine Schaltfläche und Kontrollkästchen alle in der gleichen Zeile mit Beschriftungen anzuzeigen

Question

Ich möchte alles in einer Zeile. Ich habe versucht, div und span, aber wie Sie sehen können, sind die Schaltfläche und die Kontrollkästchen jeweils in separaten Zeilen.

hier ist eine Demo des Codes unter

https://jsfiddle.net/xa4d6ddk/

<style> 
.controlhide{ 
display: none !important; 
    } 

    .controlshow{ 
     display:block !important; 
    } 

    input[type="radio"] { 
    transform:scale(1.5, 1.5); 
} 
     .sameline { 
      display:block; 
    white-space:nowrap; 
    overflow:hidden; 
     } 
     </style> 
<button id="btnanswer_3d42aa17-e7be-455b-8afa-70fe4ee3ee0a" class="btn btn-success">pass</button><label class="controlshow"><input id="btnpassanswerright_3d42aa17-e7be-455b-8afa-70fe4ee3ee0a" name="pass" value="right" type="radio">Correct</label><label class="controlshow"><input id="btnpassanswerwrong_3d42aa17-e7be-455b-8afa-70fe4ee3ee0a" name="pass" value="wrong" type="radio">Incorrect</label> 

Answer 1

Drei Dinge - Sie die Geige falsch verwenden - die Idee der js Geige ist es, alle Komponenten des Codes zu trennen in die HTML-, CSS- und Javascript-Panels. Sie scheinen sie alle im HTML-Bereich zu haben.

zweitens aber Entfernen Sie die folgende Zeile:

.controlshow{ 
     display:block !important; 
    } 

die Schaltfläche, Kontrollkästchen und Etiketten alle in einer Zeile angezeigt werden - das ist nicht das, was Sie wollen. Diese Bearbeitung funktioniert, weil diese Zeile alle Elemente von .controlShow als Elemente auf Blockebene anzeigt - also: eine eigene Zeile. Bearbeiten Sie einfach Ihre Fiedel und entfernen Sie diese Zeile, um zu sehen, was ich bemalte.

und drittens - es wird empfohlen, nicht wichtig zu verwenden, da es alle anderen css-Regeln überlagert und daher Probleme wie diese verursachen kann.