Encuesta - Crea un formulario de encuesta

Cuéntanos qué está pasando:
Describe tu problema en detalle aquí.
No puedo alinear los label con los inputs c radio y checkbox y no sé bien porque´me sucede.
gracias!
Tu código hasta el momento

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>FreeCodeCamp survey Form</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
   <body>
    <h1 id="title">Registration Form</h1>
    <p id="descriptions">Thank you for taking the time to help us improve the platform</p>
    <form id="survey-form">
      <fieldset class="name">
        <label id="name-label">Name</label><input id="name" type="text" placeholder="Enter your name"></input>
        <label id="mail-label">Email</label><input id="name" type="email" placeholder="Enter your email"></input>
        <label id="number-label">Age (optional)</label><input id="number" type="number" min="12" max="120" placeholder="Age"></input>
        <label>
          Which option best describes your current role?<label>
   <select id="dropdown" >
       <option value="">(Select current role)</option>
          <option value="1">Student</option>
          <option value="2">Full Time Job</option>
          <option value="3">Full Time Learner</option>
          <option value="4">Other</option>
          </select>
      </fieldset>
      <fieldset>
        <p>Would you recommend freeCodeCamp to a friend?</p>
        <label for="definitely">
   <input type="radio" id="definitely" name="recommend" class="inline" />Definitely </label>
     <label for="maybe"><input type="radio" id="maybe" name="recommend" class="inline"/>Maybe</label>
         <label for="not sure"><input type="radio" id="not sure" name="recommend" class="inline" />Not sure</input>

      </fieldset>
      <fieldset>
        <p>What would you like to see improved? (Check all that apply)
        </p>
<label for="front"> Front-end Projects <input type="checkbox" name="front-end" class="inline" id="front"></label>
<label for="back">Back-end Projects<input type="checkbox" name="back-end"class="inline" id="back"></label>
<label for="challenge">Challenges<input type="checkbox" name="challenges" class="inline" id="cgallenges"></label>
<label for="additional">Additional Courses<input type="checkbox" name="additional courses" class="inline" id="additional"></label>
      </fieldset>
      <fieldset>
        <p>Any comments or suggestions?
          <input type="textarea" class="text"/>
        </p>
        <input type="submit" id="submit">
      </fieldset>
    </form>
  </body>
</html>
/* file: styles.css */
body{
  background-color: darkcyan;
  width: 100%;
  height: 100vh;
  margin: 0;
  

}
form{
  width: 75vw;
  margin: 2em auto;
  background-color: cadetblue;
  border: 2px solid teal;
  padding: 2em;
  padding-bottom: 1em;
  max-width: 500px;
  min-width: 300px;
   
}
h1 {
  text-align: center
}
#descriptions {
  text-align: center;
}
h1{
 color: ivory; 
 padding-top: 1.5em;

}


input[type="submit"]{
  width:60%;
  height: 2em;
  background-color: peachpuff;
  margin: 1em 4.5em ;
  border-color: white;
  font-size: 17;
  border: 2px solid teal

}
fieldset{
  border: none;
  border-bottom: 2px solid peachpuff;
  padding: 2rem 0; 
}
input, select, textarea{
  width: 100%;
  margin: 10px 0 0 0;


}
.text{
  height: 4em;
  margin: 8px auto;
}
fieldset:last-of-type{
  border-bottom: none;
}
label {
  display: block;
 
}

Información de tu navegador:

El agente de usuario es: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36

Challenge: Encuesta - Crea un formulario de encuesta

Enlaza al desafío:

Hola.

Te faltaría crear una clase .inline en tu archivo styles.css

por ejemplo, prueba esto:

  .inline {
    width: unset;
  }

Saludos.

1 Like

Gracias!!!
saludos.