user713813 user713813 - 1 year ago 54
CSS Question

how to display a button and checkboxes all on same line with labels

I want everything on one line. I tried div and span but as you can see the button and checkboxes are each on separate lines.

here's is a demo of the code below

display: none !important;

display:block !important;

input[type="radio"] {
transform:scale(1.5, 1.5);
.sameline {
<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 Source

Three things - you are using the fiddle incorrectly - the idea of the js fiddle is to separate all the components of the code into the html, csss and javascript panels. You seem to have them all in the html section.

secondly, but removing the following line:

       display:block !important;

the button, checkboxes and labels are all displayed in a line - is this not what you want. This edit works because that line forces all .controlShow elements to be displayed as block level elements - ie: one their own line.Just edit your fiddle and remove that line to see what I man.

and thirdly - it is recommended to not use !important since it will oerride all other css rules and therefore can cause problems like this.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download