html - 如何对齐表单中的元素，以便问题在左侧而选项在右侧

Question

我正在尝试创建一个表单，我需要对齐其中的信息，以便问题在左侧对齐，而选项在右侧对齐。

我玩过 id，将它居中并左右移动。

#wholeform {
  background-color: white;
  display: inline-block;
  text-align: center;
  vertical-align: top;
  line-height: 2.0;
  border-radius: 7px;

}
#title {
   max-width: 400px;
  margin: 20px;
    text-align: center;
}
#survey-form {
  text-align: center
}

<div id="wholeform">
<p id="description">Let us know how we can improve freeCodeCamp<p>

  <form id="survey-form">
    * Name: <input type="text" name="fullname"><br>
  * Email: <input type="text" name="email"><br>
    * Age: <input type="text" name="age"><br>
    Which option best describes your current role?<select name="status">
  <option value="student">Student</option>
  <option value="full time job">Full Time Job</option>
  <option value="full time learner">Full Time Learner</option>
  <option value="Prefer not to say">Prefer not to say</option>
   <option value="Other">Other</option>
</select><br>
    * How likely is that you would recommend freeCodeCamp to a friend?<br>
    <input type="radio"> Definitely<br>
    <input type="radio"> Maybe</br>
    <input type="radio">Not sure</br>
    What do you like most in FCC:<select name="options">
   <option value="challenges">Challenges</option>
    <option value="projects">Projects</option>
    <option value="community">Community</option>
    <option value="open source">Open Source</option></select></br>
    Things that should be improved in the future(Check all that apply)<input type="checkbox" name="front-end" value="Front-end Projects"> Front-end Projects</br>
  <input type="checkbox" name="Back-end Projects" value="Back-end Projects" checked> Back-end Projects</br>
     <input type="checkbox" name="Data Visualization" value="Data Visualization" checked> Data Visualization</br>
     <input type="checkbox" name="Challenges" value="Challenges" checked> Challenges</br>
     <input type="checkbox" name="Open Source Community" value="Open Source Community" checked> Open Source Community</br>
     <input type="checkbox" name="Gitter help rooms" value="Gitter help rooms" checked> Gitter help rooms</br>
     <input type="checkbox" name="Videos" value="Videos" checked> Videos</br>
     <input type="checkbox" name="City Meetups" value="City Meetups" checked> City Meetups</br>
     <input type="checkbox" name="Wiki" value="Wiki" checked> Wiki</br>
     <input type="checkbox" name="Forum" value="Forum" checked> Forum</br>
     <input type="checkbox" name="Additional Courses" value="Additional Courses" checked> Additional Courses</br>
   Any Comments or Suggestions?<name="comments" id="comments">
Enter your comment here...
</textarea><br>
    <input type="submit">
    </form>
    </div>

预期结果问题在左边选项在右边

Answer 1

我添加了下面的代码片段供您根据您的要求创建布局，即一侧是问题，另一侧是答案。请检查并确认这是否是您想要的。注意:请填写其余详细信息。

#wholeform {
  background-color: white;
  display: inline-block;
  /* text-align: center; */
  vertical-align: top;
  /* line-height: 2.0; */
  border-radius: 7px;
  margin: 50px;
}

.form-group {
  margin-bottom: 1rem;
}

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.col {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

.col-sm-5 {
  flex: 0 0 41.666667%;
  max-width: 41.666667%;
}

.col-sm-7 {
  -ms-flex: 0 0 58.333333%;
  flex: 0 0 58.333333%;
  max-width: 58.333333%;
}

#title {
  max-width: 400px;
  margin: 20px;
  text-align: center;
}

#survey-form {
  /* text-align: center */
}

<div id="wholeform">
  <p id="description">Let us know how we can improve freeCodeCamp
    <p>

      <form id="survey-form">
        <div class="form-group row">
          <label for="staticEmail" class="col-sm-5 col-form-label">* Name</label>
          <div class="col-sm-7">
            <input type="text" class="form-control-plaintext" id="staticName" value="">
          </div>
        </div>
        <div class="form-group row">
          <label for="staticEmail" class="col-sm-5 col-form-label">* Email</label>
          <div class="col-sm-7">
            <input type="text" class="form-control-plaintext" id="staticEmail" value="email@example.com">
          </div>
        </div>
        <div class="form-group row">
          <label for="staticAge" class="col-sm-5 col-form-label">* Age</label>
          <div class="col-sm-7">
            <input type="text" class="form-control-plaintext" id="staticAge" value="">
          </div>
        </div>
        <div class="form-group row">
          <label for="staticSelect" class="col-sm-5 col-form-label">* Which option best describes your current role?</label>
          <div class="col-sm-7">
            <select id="staticSelect" class="form-control" name="status">
              <option value="student">Student</option>
              <option value="full time job">Full Time Job</option>
              <option value="full time learner">Full Time Learner</option>
              <option value="Prefer not to say">Prefer not to say</option>
              <option value="Other">Other</option>
            </select>
          </div>
        </div>
        <div class="form-group row">
          <label for="staticSelect2" class="col-sm-5 col-form-label">* How likely is that you would recommend freeCodeCamp to a friend?</label>
          <div class="col-sm-7">
            <select id="staticSelect2" class="form-control" name="status">
              <option value="student">Student</option>
              <option value="full time job">Full Time Job</option>
              <option value="full time learner">Full Time Learner</option>
              <option value="Prefer not to say">Prefer not to say</option>
              <option value="Other">Other</option>
            </select>
          </div>
        </div>
        <div class="form-group row">
          <legend class="col-form-label col-sm-5 pt-0">Radios</legend>
          <div class="col-sm-5">
            <div class="form-check">
              <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
              <label class="form-check-label" for="gridRadios1">
            First radio
          </label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
              <label class="form-check-label" for="gridRadios2">
            Second radio
          </label>
            </div>
            <div class="form-check disabled">
              <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
              <label class="form-check-label" for="gridRadios3">
            Third disabled radio
          </label>
            </div>
          </div>
        </div>
      </form>
</div>