CSS how to align label and input in input type="checkbox"

February 25, 2022

I’m having an issue where my label text and the corresponding checkbox or not next to each other, but rather diagonal. I’ve tried to fix it using float, but it hasn’t worked correctly for me.

label {
  font-weight: bold;
  margin: 1em;
}

input {
  padding: 1em;
  margin: 1em;
  width: 100%;
}

<label className="toppings">Toppings: 
  <br />
  <label> Pepperoni
     <input  ype="checkbox" name="pepperoni" />
  </label>
  <label> Pineapple
     <input  type="checkbox" name="pineapple" />
  </label>
</label>

With the above code, the label text (for example "pepperoni") is diagonally above the checkbox. Any help on how I can get them side-by-side?

>Solution :

several little things :

first you should not have a label tag that contain other label and input in it (it’s invalid)
secondly if you want to have a label for a specific input you can use the attributes for that allow you to link a label to an input

label {
  font-weight: bold;
  margin: 1em;
}

<div className="toppings">after checkbox: 
  <br />
  <input type="checkbox" id="pepperoni" name="pepperoni"
         checked>
  <label for="pepperoni">Pepperoni</label>
  <br/>
  
  <input type="checkbox" id="pineapple" name="pineapple"
         checked>
  <label for="pineapple">Pineapple</label>
</div>
<br/>

<br/>
<div className="toppings">Before Checkbox: 
  <br />
  <label for="pepperoni2">Pepperoni</label>
  <input type="checkbox" id="pepperoni2" name="pepperoni2"
         checked>
  <br/>
  
  <label for="pineapple2">Pineapple</label>
  <input type="checkbox" id="pineapple2" name="pineapple2"
         checked>
</div>