html - 垂直对齐单选按钮
问题描述
基本上我试图让我的所有按钮像第一个问题一样垂直对齐。我不明白为什么我不能让第二个问题正确对齐。我尝试了不同的方法,例如使用 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>
解决方案
您的代码是正确的,它们已经是中间对齐的,但是根据文本,您的 css 以正确的方式不可见,因此也使用 lebels 作为文本并对齐标签
推荐阅读
- python - Python:我如何从这个日期范围 08/03/2020 到 08/03/2020 获取日期(excel 相当于 left(08/03/2020 到 08/03/2020, 10))
- python - 资源已存在
- date - DAX 日历月中的所有活动订阅,X 个月前
- apache-spark - Hive hql 到 Spark sql 的转换
- ios - 无法将 cer 文件导出到 .p12 文件,该选项已禁用
- c# - 将文件保存在不同位置时的hwnd窗口句柄问题
- python - 从每列中删除零并使用 python pandas/numpy 重新排列
- javascript - 无法访问集合 Firestore 中的文档
- javascript - 为什么带数字的键出现在以下对象中的字母之前?
- javascript - 我能找出这个错误的真正原因吗?(反应原生)