[英]How do I vertically align radio buttons?
所以我想要一張帶有問題和五個單選按鈕的表格。 但是正如你所看到的,對於不同的問題長度,它是一團糟。 盡管問題很長,如何很好地對齊按鈕,以便它們垂直位於標題下方?
[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;
}
我建議將您的 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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.