HTML & CSS radio and checkbox buttons - float: left; ?

[ramzez]

I ran into a problem with my html/css form.

I have radio buttons and checkboxes in my form. I want them to display like this:


It works in Codepen.io when I edit them, but as soon as I click somewhere or open de preview in a new window, it looks like this:



I used display: block; and float: left; to get this result.

.input-radio, .input-checkbox {
  display: block;
  float: left;
  margin-right: 0.5rem;
  min-height: 1rem;
  min-width: 1.5rem;
  margin-top: 4px;
  vertical-align: middle; 
}

  <div class="form-group">
      <p>Are you a part of the BUK girls discord channel?</p>
       <label for="radio1">
       <input type="radio" id="radio1"
              name="discordchannel"
              value="yes"
              class="input-radio">
         Yes </label>
      
      <label for="radio2">     
       <input type="radio" id="radio2"
              name="discordchannel"
              value="no"
              class="input-radio">
      No </label>
    </div>

Link: to the pen: https://codepen.io/hadassahreuvekamp/pen/yLzpebj

So why does this happen? Any tips on how to organize the checkboxes?

Thanks!

 

[Johna]

Try adding adding a line break, <br>, in between each option:

<div class="form-group">
      <p>Are you a part of the BUK girls discord channel?</p>
       <label for="radio1">
       <input type="radio" id="radio1"
              name="discordchannel"
              value="yes"
              class="input-radio">
         Yes </label>
      <br> <!--    add <br> here    -->
      <label for="radio2">     
       <input type="radio" id="radio2"
              name="discordchannel"
              value="no"
              class="input-radio">
      No </label>
    </div>
    
    <div class="form-group">
      <p>What game(s) do you want to play?</p>
      <label for "minecraft">
        <input id="minecraft"
               class="input-checkbox"
               type="checkbox"
               name="games"
               value="minecraft"
               > Minecraft
      </label>
      <br> <!--    and here    -->
      <label for "leaugeoflegends">
         <input id="leaugeoflegends"
                class="input-checkbox"
                type="checkbox"
                name="games"
                value="leagueoflegends"
                > League of Legends
      </label>
      <br> <!--    and here    -->
      <label for "valorant">
         <input id="valorant"
                class="input-checkbox"
                type="checkbox"
                name="games"
                value="valorant"
                > Valorant
      </label>
      <br> <!--    and here    -->
      <label for "other">
         <input id="other"
                class="input-checkbox"
                type="checkbox"
                name="games"
                value="other"
                > Other (specify below)
      </label>
    
    </div>

 

[ramzez]

Try adding adding a line break, <br>, in between each option:

<div class="form-group">
      <p>Are you a part of the BUK girls discord channel?</p>
       <label for="radio1">
       <input type="radio" id="radio1"
              name="discordchannel"
              value="yes"
              class="input-radio">
         Yes </label>
      <br> <!--    add <br> here    -->
      <label for="radio2">    
       <input type="radio" id="radio2"
              name="discordchannel"
              value="no"
              class="input-radio">
      No </label>
    </div>
   
    <div class="form-group">
      <p>What game(s) do you want to play?</p>
      <label for "minecraft">
        <input id="minecraft"
               class="input-checkbox"
               type="checkbox"
               name="games"
               value="minecraft"
               > Minecraft
      </label>
      <br> <!--    and here    -->
      <label for "leaugeoflegends">
         <input id="leaugeoflegends"
                class="input-checkbox"
                type="checkbox"
                name="games"
                value="leagueoflegends"
                > League of Legends
      </label>
      <br> <!--    and here    -->
      <label for "valorant">
         <input id="valorant"
                class="input-checkbox"
                type="checkbox"
                name="games"
                value="valorant"
                > Valorant
      </label>
      <br> <!--    and here    -->
      <label for "other">
         <input id="other"
                class="input-checkbox"
                type="checkbox"
                name="games"
                value="other"
                > Other (specify below)
      </label>
   
    </div>

That was the trick, thank you!