如何垂直对齐单选按钮？答案

【问题标题】：How do I vertically align radio buttons?如何垂直对齐单选按钮？
【发布时间】：2018-01-16 16:29:14
【问题描述】：

所以我想要一张包含一个问题和五个单选按钮的表格。但是正如您所看到的，对于不同的问题长度，这是一团糟。尽管问题很长，如何很好地对齐按钮，以便它们垂直位于标题下方？

[IMG]http://i68.tinypic.com/vpkftw.png[/IMG]

这是html：

<h4> Ans1  </h4><h4>Answer2 </h4><h4> Ans3 </h4><h4> Ans4 </h4><h4>Ans5 </h4> <br>
Q1 ......................      <input type="radio" name="v1" id="v1_1" value="1"> <input type="radio" name="v1" id="v1_2" value="Bike"> <input type="radio" name="v1" id="v1_3" value="Bike"> <input type="radio" name="v1" id="v1_4" value="Bike"> <input type="radio" name="v1" id="v1_5" value="Bike"> <br>
Q2... <input type="radio" name="v2" id="v2_1" value="Bike"> <input type="radio" name="v2" id="v2_2" value="Bike"> <input type="radio" name="v2" id="v2_3"value="Bike"> <input type="radio" name="v2" id="v2_4" value="Bike"> <input type="radio" name="v2" id="v2_5" value="Bike"> <br>
Q3.<input type="radio" name="v3" id="v3_1" value="Bike"> <input type="radio" name="v3" id="v3_2" value="Bike"> <input type="radio" name="v3" id="v3_3"value="Bike"> <input type="radio" name="v2" id="v3_4" value="Bike"> <input type="radio" name="v2" id="v3_5" value="Bike"> <br>
Q4 <input type="radio" name="v4" id="v4_1" value="Bike"> <input type="radio" name="v4" id="v4_2" value="Bike"> <input type="radio" name="v4" id="v4_3"value="Bike"> <input type="radio" name="v4" id="v4_4" value="Bike"> <input type="radio" name="v4" id="v4_5" value="Bike"> <br>

CSS：

h4 {
display: inline;
position: relative;
left: 280px;

}

h4:nth-child(2) {
margin-left:6em;

}


h4:nth-child(3) {
margin-left:5em;


}


h4:nth-child(4) {
margin-left:7em;

}

h4:nth-child(5) {
margin-left:4em;

}

【问题讨论】：

为什么不使用表格？
@Hektor 因为我不想要问题之间的界限，这在我看来有点难看
如果您在 jsfiddle 或 codepen 中重新创建问题会有所帮助，这样我们就可以确切地看到发生了什么。
1.将表格用于布局目的是一种不好的做法。 2. 如果您确实需要使用表格来显示实际的表格数据，可以按照您喜欢的方式设置它们的样式 - 无需线条等
你的图片链接失效了，你的代码看起来像这样codepen.io/mcoker/pen/OjmJrV我不知道你想垂直对齐什么。

标签： html css button alignment radio

【解决方案1】：

我建议将您的 html 放在一个表格中，就像您在这里看到的那样，没有边框、线条或其他任何东西。但如果是这样，只需使用 border:0px; 将其删除，例如： https://codepen.io/anon/pen/mMmydy

<table>
<tr>
  <th></th>
  <th>First Name</th>
  <th>Last Name</th>
  <th>Points</th>
</tr>
<tr>
  <td>Jill</td>
  <td>Smith</td>
  <td>50</td>
  <td>50</td>
</tr>
<tr>
  <td>Jill</td>
  <td>Smith</td>
  <td>50</td>
  <td>50</td>
</tr>
</table>

【讨论】：