垂直对齐单选按钮答案

【问题标题】：Vertically align Radio Buttons垂直对齐单选按钮
【发布时间】：2020-07-23 04:24:51
【问题描述】：

基本上我试图让我的所有按钮像第一个问题一样垂直对齐。我不明白为什么我不能让第二个问题正确对齐。我尝试了不同的方法，例如使用 vertical-align: middle 属性，但我什么也做不了

body {
  margin: 0px;
  background-image: linear-gradient(to top, #48c6ef 0%, #6f86d6 100%);
}

#wrapper {
  padding-top: 0px;
  text-align: center;
  margin-top: -1%;
  margin-left: 20%;
  margin-right: 20%;
  background-color: white;
  clear: both;
}

#quiz {
  padding-bottom: 10px;
}

#quiz li {
  list-style-type: none;
}

.question {
  padding-bottom: 10px;
  vertical-align: middle;
}

<div id="wrapper">

  <div id="quiz">


    <form name="quiz" method="post" name="buttons" id="quiz" onsubmit="return false">
      <li>
        <div class="question">1. How many continents are there?</div>
      </li>
      <input id="answer" type="radio" name="group1" value="wrong"> 6<br>
      <input id="answer" type="radio" name="group1" value="wrong"> 8<br>
      <input id="answer" type="radio" name="group1" value="correct"> 7<br>
      <input id="answer" type="radio" name="group1" value="wrong"> 5
      <hr>


      <li>
        <div class="question">2. Where is France located?</div>
      </li>
      <input id="answer" type="radio" name="group2" value="correct">Europe<br>
      <input id="answer" type="radio" name="group2" value="wrong">Asia<br>
      <input id="answer" type="radio" name="group2" value="wrong">Antarctica<br>
      <input id="answer" type="radio" name="group2" value="wrong">North America
      <hr>
    </form>

  </div>
</div>

【问题讨论】：

标签： html css button alignment radio

【解决方案1】：

您的代码是正确的，它们已经是中间对齐的，但是根据文本，您的 css 以正确的方式不可见，因此对文本使用 lebels 并对齐标签也

【讨论】：

【解决方案2】：

使用text-align: left; 和display: inline-block; 解决了您的问题

body {
  margin: 0px;
  background-image: linear-gradient(to top, #48c6ef 0%, #6f86d6 100%);
}

#wrapper {
  padding-top: 0px;
  text-align: center;
  margin-top: -1%;
  margin-left: 20%;
  margin-right: 20%;
  background-color: white;
  clear: both;
}

#quiz {
  padding-bottom: 10px;
}

#quiz li {
  list-style-type: none;
}

.question {
  padding-bottom: 10px;
  vertical-align: middle;
}

.wrap {
  text-align: left;
  display: inline-block;
}

<div id="wrapper">

  <div id="quiz">


    <form name="quiz" method="post" name="buttons" id="quiz" onsubmit="return false">
      <li>
        <div class="question">1. How many continents are there?</div>
      </li>
      <input id="answer" type="radio" name="group1" value="wrong"> 6<br>
      <input id="answer" type="radio" name="group1" value="wrong"> 8<br>
      <input id="answer" type="radio" name="group1" value="correct"> 7<br>
      <input id="answer" type="radio" name="group1" value="wrong"> 5
      <hr>


      <li>
        <div class="question">2. Where is France located?</div>
      </li>
      <div class="wrap">
        <input id="answer" type="radio" name="group2" value="correct">Europe<br>
        <input id="answer" type="radio" name="group2" value="wrong">Asia<br>
        <input id="answer" type="radio" name="group2" value="wrong">Antarctica<br>
        <input id="answer" type="radio" name="group2" value="wrong">North America
      </div>
      <hr>
    </form>

  </div>
</div>

【讨论】：

非常感谢，我想不通以挽救我的生命。