我正在尝试创建一个表单，我需要对齐其中的信息，以使问题在左侧对齐，而选项在右侧对齐。
我玩过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>
右侧选项左侧的预期结果问题
答案 0 :(得分：0)
我添加了一个以下代码段，供您根据自己的需求创建布局，即一侧为问题，另一侧为答案。请检查并确认这是否是您想要的。 注意：请填写其余详细信息。
#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>