How to I get my label and radio/checkbox buttons to be in the same line?-CodePudding

I'm currently learning HTML from freecodecamp.org and I've found myself stuck on one of the early projects. When trying to style my page, I can't seem to get labels and radios/checkboxes on the same line. I've tried adding classes to the labels, but I couldn't get that to work. I've tried to address those labels and inputs specifically with input[type="radio"] as well. Looking for suggestions, perhaps some guidance and explanation of what I'm doing wrong too.

body {
    background-color: #1F3A46;
    color: #EEEAFA;
    width: 100%;
    height: 100vh;
    margin: 0;
    font-family: Sans-Serif;
    font-size: 16px; 
}

h1, p{
  margin: 1em auto;
  text-align: center;
}

form{
  width: 60vw;
  max-width: 500px;
  min-width: 300px;
  margin: 0 auto;
  padding-bottom: 2em;
}

fieldset {
    border: none;
    padding: 2rem 0;
    
}
fieldset:not(:last-of-type) {
  border-bottom: 3px solid #1c2f38
}

label {
  display: block;
  margin: 0.5rem 0;
}

input, textarea, select{
  margin: 10px 0 0 0;
  min-width: 100%;
  min-height: 2em;
}

input, textarea {
    background-color: #2a4754;
    border: 1px solid #2a4754;
    color: #EEEAFA;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Keyboard Survey Project</title>
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link href="styles.css" rel="stylesheet" type="text/css" />
  </head>
<body>
  <h1 id="title">Keyboard Survey</h1> 
  <p id="description">We want to know what your preferred type of keyboard is!</p>
  <form id="survey-form">
    <fieldset>
      <label id="name-label">Name: <input id="name" type="text" placeholder="Keyboard Kenny" required /> </label>
      <label id="email-label">Email: <input id="email" type="email" placeholder="[email protected]" required /> </label>
      <label id="number-label">Age(optional): <input id="number" type="number" min="13" max="120" placeholder="99" /> </label>
    </fieldset>
    <fieldset>
      <label>Size:
        <select id="dropdown" required>
          <option name="dropdownmenu" value="100" >Full Sized</option>
          <option name="dropdownmenu" value="90">90%/1800 Compact</option>
          <option name="dropdownmenu" value="80" >TKL/80%</option>
          <option name="dropdownmenu" value="75" >75%</option>
          <option name="dropdownmenu" value="65" >65%</option>
          <option name="dropdownmenu" value="60" >60%</option>
          <option name="dropdownmenu" value="40" >40%</option>
        </select>
      </label>
      <label>Layout:
        <select id="dropdown2" required>
          <option name="dropdownmenu2" value="ansi" >ANSI</option>
          <option name="dropdownmenu2" value="iso">ISO</option>
          <option name="dropdownmenu2" value="jis">JIS</option>
        </select>
      </label>
      
    </fieldset>
    <fieldset>
      <label>Do you like RGB lighting?
        <label>Yes<input type="radio" name="rgb" value="rgbyes"/></label>
        <label>No<input type="radio" name="rgb" value="rgbno" /></label>
        </label>
    </fieldset>
    <fieldset>Favorite Switch Type:
      <label>Tactile<input type="checkbox" value="tactile" /></label>
      <label>Linear<input type="checkbox" value="linear" /></label>
      <label>Clicky<input type="checkbox" value="clicky" /></label>
    </fieldset>
    <fieldset>
      <label>Do you have any special preferences not listed above? 
        <textarea rows="3" cols="30" placeholder="Place them here!"></textarea>
      </label>
    </fieldset>
    <input id="submit" type="submit" value="Submit" />
  </form>
</body>

CodePudding user response：

The problem is that this code is making the radio buttons fill the entire line, leaving no room for the labels:

input, textarea, select{
    margin: 10px 0 0 0;
    min-width: 100%;
    min-height: 2em;
}

I would suggest adding this code to avoid selecting checkboxes and radios

input:not([type="radio"],[type="checkbox"]), textarea, select{
    margin: 10px 0 0 0;
    min-width: 100%;
    min-height: 2em;
}

You can then style those types of inputs separately using this selector:

input[type="radio"],[type="checkbox"] {
    /*styles here*/
}