Input (checkbox and radio) cannot inline with my label ,what can I do ,pls help

HTML-CSS
1 
<!DOCTYPE html>
<html lang="en">
  <link rel="stylesheet" href="styles.css">
  <head>
    <h1 id="title">freeCodeCamp Survey Form</h1>
    <p id="description">Thank you for taking the time to help us improve the platform</p>
    </head>
  <body>
    <form id="survey-form" method="post" action="https://register-demo.freecodecamp.org">
      <label id="name-label" for="name">Name<input id="name" type="text" name="name" placeholder="Enter your name" required ></label>
      <label id="email-label" for="email">Email<input id="email" type="email" name="email" placeholder="Enter your email" required ></label>
      <label id="number-label" for="age">Age (optional)<input id="number" type="number" min="13" max="120" name="age" placeholder="66" required ></label>
      <label for="role">Which option best describes your current role?
      <select id="dropdown" name="role">
      <option disabled>Select current role</option>
      <option value="">Student</option>
      <option value="1">Full time job</option>
      <option value="2">Full time learner</option>
      <option value="3">Prefer not to say</option>      <option value="4">Other</option>     
        </select>
        </label>
        <label>Would you recommend freeCodeCamp to a friend?
          <input value="1" type="radio" name="recommend" class="inline"><label class="a">Definitely</label>
          <input value="2" type="radio" name="recommend" class="inline"> Maybe
          <input value="3" type="radio" name="recommend" class="inline"> Not sure
          </label>
          <label>What is your favorite feature of freeCodeCamp?
          <select>
              <option disabled>Select an option</option>
              <option vlue="">Challenges</option>
             <option value="1">Projects</option> 
             <option value="2">Community</option>
             <option value="3">Open source</option>
              </select>
            </label>
            <label>What would you like to see improved? (Check all that apply)
              <input type="checkbox" value="1"> Front-end Projects
<input type="checkbox" value="2"> Back-end Projects
<input type="checkbox" value="3"> Data Visualization
<input type="checkbox" value="4"> Challenges
<input type="checkbox" value="5"> Open Source Community
<input type="checkbox" value="6"> Gitter help rooms
<input type="checkbox" value="7"> Videos
<input type="checkbox" value="8"> City Meetups 
<input type="checkbox" value="9"> Wiki
<input type="checkbox" value="10"> Forum
<input type="checkbox" value="11"> Additional courses
</label>
              <label class="textarea">Any comments or suggestions?
              <textarea id="comments-or-suggestions" rows="3" cols="30" placeholder="Enter your comment here..." ></textarea>
                </label>
    </body>
    <input type="submit" id="submit">  
  </html>

body{background-color: cyan;

font-family: Tahoma;

width: 80%;

height: 100vw;

display: }
h1,p{text-align: center;
width: 100%;
margin: 1.5rem;
font-size: 20px;}
label{display: inline-block;
margin: 0.5rem 1rem;
font-size: 18px;
width: 100%;
align-items: center;
}
input,select{display: block;
width: 100%;
margin: 1.5px;
}
input[type="radio"]{width: unset;
min-height: 1.5em;
border: 1px solid;
margin-right: 0.5rem;
display: 
}
.a{width: unset;
}
.inline{width: unset;
margin: 0 0.5rem 0 0;
vertical-align: center;
}
input[type="checkbox"]{width: unset;
min-height: 1.5em;
border: 1px solid;
margin-right: 0.5rem}
input[type="submit"]{background-color: green;
color: white;
width: 102%;
height: 3em;
margin: 1.2em;
border: 1px solid black;}
textarea{
display: block;
width: 100%;
margin: 0rem;}
.textarea{margin: 1rem}
2 
<!DOCTYPE html>
<html lang="en">
  <link rel="stylesheet" href="styles.css">
  <head>
    <h1 id="title">freeCodeCamp Survey Form</h1>
    <p id="description">Thank you for taking the time to help us improve the platform</p>
    </head>
  <body>
    <form id="survey-form" method="post" action="https://register-demo.freecodecamp.org">
      <label id="name-label" for="name">Name<input id="name" type="text" name="name" placeholder="Enter your name" required ></label>
      <label id="email-label" for="email">Email<input id="email" type="email" name="email" placeholder="Enter your email" required ></label>
      <label id="number-label" for="age">Age (optional)<input id="number" type="number" min="13" max="120" name="age" placeholder="66" required ></label>
      <label for="role">Which option best describes your current role?
      <select id="dropdown" name="role">
      <option disabled>Select current role</option>
      <option value="">Student</option>
      <option value="1">Full time job</option>
      <option value="2">Full time learner</option>
      <option value="3">Prefer not to say</option>      <option value="4">Other</option>     
        </select>
        </label>
        <label>Would you recommend freeCodeCamp to a friend?
          <input value="1" type="radio" name="recommend" class="inline"> Definitely
          <input value="2" type="radio" name="recommend" class="inline"> Maybe
          <input value="3" type="radio" name="recommend" class="inline"> Not sure
          </label>
          <label>What is your favorite feature of freeCodeCamp?
          <select>
              <option disabled>Select an option</option>
              <option vlue="">Challenges</option>
             <option value="1">Projects</option> 
             <option value="2">Community</option>
             <option value="3">Open source</option>
              </select>
            </label>
            <label>What would you like to see improved? (Check all that apply)
              <input type="checkbox" value="1"> Front-end Projects
<input type="checkbox" value="2"> Back-end Projects
<input type="checkbox" value="3"> Data Visualization
<input type="checkbox" value="4"> Challenges
<input type="checkbox" value="5"> Open Source Community
<input type="checkbox" value="6"> Gitter help rooms
<input type="checkbox" value="7"> Videos
<input type="checkbox" value="8"> City Meetups 
<input type="checkbox" value="9"> Wiki
<input type="checkbox" value="10"> Forum
<input type="checkbox" value="11"> Additional courses
</label>
              <label class="textarea">Any comments or suggestions?
              <textarea id="comments-or-suggestions" rows="3" cols="30" placeholder="Enter your comment here..." ></textarea>
                </label>
    </body>
    <input type="submit" id="submit">  
  </html>
3

Continuing the discussion from Input (checkbox and radio) cannot inline with my label ,what can I do ,pls help:

freeCodeCamp Survey Form

Thank you for taking the time to help us improve the platform

Name Email Age (optional) Which option best describes your current role? Would you recommend freeCodeCamp to a friend? Definitely Maybe Not sure What is your favorite feature of freeCodeCamp? What would you like to see improved? (Check all that apply) Front-end Projects Back-end Projects Data Visualization Challenges Open Source Community Gitter help rooms Videos City Meetups Wiki Forum Additional courses Any comments or suggestions?
4

Welcome to the forum @Hao5186

Please do not create duplicate topics for the same challenge/project question(s). If you need more help then respond back to the original topic you created with your follow up questions and/or your updated code and question.
This duplicate topic has been unlisted.

Thank you.

5

Hi @Hao5186

So the forum can assist, please explain in your own words what the issue is. If you want to, please provide screen grabs of how the page renders in your browser.

Happy coding

1 Like
6

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Get Help button located on the challenge. This button only appears if you have tried to submit an answer at least three times.

The Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

1 Like