html - 如何在标签旁边放置单选按钮

Question

我已经开始学习网络开发的基础知识，目前正在尝试 html 和 css。我的问题是如何使单选按钮出现在标签(问题)的右侧，就像它出现在图片的左侧一样。现在我所能做的就是在右边。你能帮帮我吗？

这是我的CSS:

@import url(https://fonts.googleapis.com/css?family=Raleway:400,500);
body {
  background-color: #a9d7d1;
  font-family: Raleway;
  text-align: center;
  min-width: 320px;
}

#title {
  text-weight: bold;
  font-size: 50px;
  margin: 20px;
}

#center {
  margin: 0 auto;
  background-color: rgb(250, 250, 250);
  width: 60%;
  border: 0px solid;
  border-radius: 5%;
}

#description {
  padding-top: 30px;
}

#name-label,
#email-label,
#age-label,
#Role-label,
#userRating-label,
#most-like-label,
#preferences-label #comments-label {
  padding: 10px;
  display: inline-block;
  vertical-align: center;
}

#submit {
  color: white;
  background-color: #59ace0;
  border-radius: 5%;
  border: 0px solid;
  height: 40px;
  width: 100px;
  margin: 20px;
}

textarea {
  width: 30%;
}

.dropdown {
  height: 35px;
  width: 140px;
  padding: 5px;
  margin: 10px;
  margin-top: 15px;
  border: 1px solid #c0c0c0;
  border-radius: 2px;
}

#name,
#email,
#age {
  height: 20px;
  width: 200px;
  padding: 5px;
  margin: 10px;
  margin-top: 15px;
  border: 1px solid #c0c0c0;
  border-radius: 2px;
}

textarea {
  vertical-align: top;
}

li {
  padding: 5px;
}

<div id="preferences-div">

  <label for="preferences" name="preferences" id="preferences-label">Things that should be improved in the future<br>(Check all that apply):</label>

  <ul id="preferences" style="list-style: none;">
    <li class="checkbox"><label><input name="prefer" value="1" type="checkbox" class="userRatings">Front-end Projects</label></li>
    <li class="checkbox"><input name="prefer" value="2" type="checkbox" class="userRatings">Back-end Projects</li>
    <li class="checkbox"><label><input name="prefer" value="3" type="checkbox" class="userRatings">Data Visualization</label></li>
    <li class="checkbox"><label><input name="prefer" value="4" type="checkbox" class="userRatings">Challenges</label></li>
    <li class="checkbox"><label><input name="prefer" value="5" type="checkbox" class="userRatings">Open Source Community</label></li>
    <li class="checkbox"><label><input name="prefer" value="6" type="checkbox" class="userRatings">Gitter help rooms</label></li>
    <li class="checkbox"><label><input name="prefer" value="7" type="checkbox" class="userRatings">Videos</label></li>
    <li class="checkbox"><label><input name="prefer" value="8" type="checkbox" class="userRatings">City Meetups</label></li>
    <li class="checkbox"><label><input name="prefer" value="9" type="checkbox" class="userRatings">Wiki</label></li>
    <li class="checkbox"><label><input name="prefer" value="10" type="checkbox" class="userRatings">Forum</label></li>
    <li class="checkbox"><label><input name="prefer" value="10" type="checkbox" class="userRatings">Additional Courses</label></li>
  </ul>
</div>

Answer 1

最终解决方案:

#preferences {
  display: inline-block;
  list-style: none;
}

#preferences-label {
  display: inline-block;
  vertical-align: top;
}

<div id="preferences-div">

    <label for="preferences" name="preferences" id="preferences-label">Things that should be improved in the future<br>(Check all that apply):</label>

    <ul id="preferences">
      <li class="checkbox"><label><input name="prefer" value="1" type="checkbox" class="userRatings">Front-end Projects</label></li>
      <li class="checkbox"><input name="prefer" value="2" type="checkbox" class="userRatings">Back-end Projects</li>
      <li class="checkbox"><label><input name="prefer" value="3" type="checkbox" class="userRatings">Data Visualization</label></li>
      <li class="checkbox"><label><input name="prefer" value="4" type="checkbox" class="userRatings">Challenges</label></li>
      <li class="checkbox"><label><input name="prefer" value="5" type="checkbox" class="userRatings">Open Source Community</label></li>
      <li class="checkbox"><label><input name="prefer" value="6" type="checkbox" class="userRatings">Gitter help rooms</label></li>
      <li class="checkbox"><label><input name="prefer" value="7" type="checkbox" class="userRatings">Videos</label></li>
      <li class="checkbox"><label><input name="prefer" value="8" type="checkbox" class="userRatings">City Meetups</label></li>
      <li class="checkbox"><label><input name="prefer" value="9" type="checkbox" class="userRatings">Wiki</label></li>
      <li class="checkbox"><label><input name="prefer" value="10" type="checkbox" class="userRatings">Forum</label></li>
      <li class="checkbox"><label><input name="prefer" value="10" type="checkbox" class="userRatings">Additional Courses</label></li>
    </ul>
  </div>