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

Question

我已经开始学习Web开发的基础知识，目前正在尝试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>

Answer 2

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

只需将标签标签取出，就像这样：

<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>

<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">Front-end Projects<input name="prefer" value="1" type="checkbox" class="userRatings"></li>
    </ul>
  </div>

Answer 3

Flexbox可以做到这一点。

@import url(https://fonts.googleapis.com/css?family=Raleway:400,500);
* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #a9d7d1;
  font-family: Raleway;
  text-align: center;
  min-width: 320px;
}

#title {
  font-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;
}

#preferences-label {
  margin-right: 20px;
}

#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;
}

ul {
  display: flex;
  flex-direction: column;
  text-align: left;
}

li {
  padding: 5px;
}

#preferences-div {
  display: flex;
}

<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>