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

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?

CodePudding user response：

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>

CodePudding user response：

It depends on what your final result is supposed to look like design-wise, but changing your markup like this is one option.

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

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

CodePudding user response：

One approach is as follows, with explanatory comments in the code:

/* a simple CSS reset to ensure that all/most elements share a common
   default sizing and layout: */
*,
 ::before,
 ::after {
  box-sizing: border-box;
  font: normal 1rem / 1.5 sans-serif;
  margin: 0;
  padding: 0;
}

h2 {
  font-size: 1.3em;
}

h2::after {
  content: ': ';
}

.toppings {
  /* using the CSS clamp function to set a variable
     width on the .toppings element; here we have
     a minimum size of 10em, a maximum size of 500px
     and otherwise the width will be 80% so long as
     80% is within the defined boundaries: */
  width: clamp(10em, 80%, 500px);
  /* CSS logical properties, for a left-to-right
     language, this equates to a margin-left and
     margin-right: */
  margin-inline: auto;
}

label {
  /* using CSS flex-box layout: */
  display: flex;
  /* vertically aligning the content
     in the center: */
  align-content: center;
  /* justifying the content so that any
     left over space appears between the
     descendant elements: */
  justify-content: space-between;
  /* in a left-to-right, top-to-bottom, language
     this is equivalent to margin-top and
     margin-bottom: */
  margin-block: 0.5em;
}

<!-- changed the <label> element to a <section>, as nesting <label> elements
     results in invalid HTML: -->
<section >
  <!-- using a <h2> element to title the section: -->
  <h2>Toppings</h2>
  <label>Pepperoni
     <!-- corrected a typo here, 'type' was written as 'ype' which resulted in
          a text-input being shown: -->
     <input type="checkbox" name="pepperoni" />
  </label>
  <label>Pineapple
     <input type="checkbox" name="pineapple" />
  </label>
</section>

JS Fiddle demo.