CSS - how to make the checkbox and label in one line?

Question

How to put the checkbox and label in one line?

<style>
          @supports (zoom:2) {
            input[type=checkbox]{
            zoom: 2;
            }
          }
          @supports not (zoom:2) {
            input[type=checkbox]{
              transform: scale(2);
              margin: 15px;
            }
          }
          label{
            /* fix vertical align issues */
            display: inline-block;
            vertical-align: top;
            margin-top: 10px;
            color:black;
          }
        </style>
        <input  type="checkbox" name="check_gdpr" id="check_gdpr" checked /> 
        <label for="cc">Inform me by e-mail</label>

score 2 · Answer 1 · answered May 29 '18 at 02:24

2

Wrap the input in the label:

<label><input type="checkbox" name="check_gdpr" id="check_gdpr" checked>Inform me by e-mail</label>

answered May 29 '18 at 02:24

chanceoneal6

21
2

Remove the CSS for both your checkbox and your label and see if they line up. If they do, just add the CSS that's necessary for aesthetics and not alignment. – chanceoneal6 May 29 '18 at 02:56

score 0 · Answer 2 · answered May 29 '18 at 02:24

0

Update

vertical-align: top

to

vertical-align: middle

in your CSS for label and it should work just fine.

answered May 29 '18 at 02:24

Sandeep

129
2
7

I am sorry to learn that it did not work for you. I am sharing a link of the solution for a query similar to yours. Hope it helps. https://stackoverflow.com/a/306593/9628414 – Sandeep May 29 '18 at 02:38
Tried that link but still does not work, the checkbox is not in the same line of text. – May 29 '18 at 02:44

score 0 · Answer 3 · answered May 29 '18 at 04:37

just put your checkbox and label in span

example<span class="get-inline"><lable>Inform me by e-mail</lable></span> <span class="get-inline"><input type="checkbox" name="check_gdpr" id="check_gdpr" checked /> </span>

now add css like this:

.get-inline{display:inline-block;}

i hope it will work

CSS - how to make the checkbox and label in one line?

3 Answers3