html - 使用div时如何对齐单选按钮?
问题描述
对于我正在进行的 mcq 调查,我需要使用 3 个单选按钮设置 3 个答案的样式。我四处寻找这个问题,但找不到与我使用相同格式的人。
逻辑和 java 脚本运行良好,但我找不到将 3 个答案垂直对齐在中心的方法,单选按钮位于它们的左侧。
这是代码片段:
var elem = document.getElementById("myBar");
var width = 0;
var id = null;
var click = false;
function move() {
var elem = document.getElementById("myBar");
if (width < 100) {
width+=10;
elem.style.width = width + '%';
elem.innerHTML = width * 1 + '%';
}
}
function intil() {
questions = [ "question1 ?",
"question2?",
"question3?" ];
answers = [ ["a", "answer1"], ["b", "answer2"],["c","answer3"] ,
["a", "5%"], ["b", "13%"], ["c","29%"],
["a","4890"],["b","7589"],["c","12056"] ];
correctAnswers = ["a", "b" ,"c" ];
curQuesNum=0
previous.style.display = "none";
submit.style.display = "none";
review.style.display = "none";
retry.style.display = "none";
img1.style.display="none";
img2.style.display="none";
next.addEventListener("click",showNext);
previous.addEventListener("click",showPrev);
submit.addEventListener("click",submits);
retry.addEventListener("click",retrys);
review.addEventListener("click",reviews);
inputAnswers= Array(questions.length).fill(0)
correctAnswer.style.display = "none";
wrongAnswers=[]
check3=0
check1=0
}
function showQuiz() {
checkSlide()
document.getElementById("question").innerHTML= curQuesNum+1+") "+questions[curQuesNum]
document.getElementById("answer1").innerHTML= answers[(3*curQuesNum)][0]+": "+answers[(3*curQuesNum)][1];
document.getElementById("answer2").innerHTML= answers[(3*curQuesNum)+1][0]+": "+answers[(3*curQuesNum)+1][1];
document.getElementById("answer3").innerHTML= answers[(3*curQuesNum)+2][0]+": "+answers[(3*curQuesNum)+2][1];
document.getElementById("correctAnswer").innerHTML="The correct answer is: "+correctAnswers[curQuesNum];
}
function checkSlide(){
if (curQuesNum!==0) {
previous.style.display = "inline-block";
} else {
previous.style.display = "none";
}
if (curQuesNum===questions.length-1) {
next.style.display = "none";
if (check3==0) {
submit.style.display = "inline-block";
}
}
if (curQuesNum!==questions.length-1) {
next.style.display = "inline-block";
submit.style.display = "none";
}
}
function checkinput() {
if (check3==0) {
check2=0
var radios = document.getElementsByName('mcq');
var radiosVal;
for(var i = 0; i < radios.length; i++) {
if(radios[i].checked){
radiosVal = radios[i].value;
check2=1;
}
}
if (check2==1) {
inputAnswers[curQuesNum]=radiosVal
} else {
inputAnswers[curQuesNum]=0
}
}
}
function clearRadio(){
if (inputAnswers[curQuesNum]==0) {
var ele = document.getElementsByName("mcq");
for(var i=0;i<ele.length;i++)
ele[i].checked = false;
}
}
function showResults() {
numCorrect = 0;
for(var i=0;i<questions.length;i++) {
if (inputAnswers[i]==correctAnswers[i]) {
numCorrect++
} else {
wrongAnswers.push(i);
}
}
var percentage = numCorrect / questions.length;
var outMessage;
if (percentage >= 0.9) {
outMessage = 'Great job! You are an Expert!'
} else if (percentage >= .75) {
outMessage = 'Pritty good! Keep improving!.';
var image = document.getElementById('img1');
image.src = "silver.jpg";
} else if (percentage >= .5) {
outMessage = 'Not bad. Keep practicing!';
var image = document.getElementById('img1');
image.src = "bronze.jpg";
} else {
outMessage = 'Ohoh you need to catch up!';
var image = document.getElementById('img1');
image.src = "4th.jpg";
}
document.getElementById("resultMessage").innerHTML=outMessage
img1.style.display="block"
document.getElementById("results").innerHTML = "You got </br>"+ numCorrect+" out of "+ questions.length;
}
function reviews() {
check3=1
curQuesNum=0
showQuiz()
clearRadio()
selectRadio()
showRev()
img2.style.display="inline-block";
img1.style.display="none";
question.style.display = "block";
radio1.style.display = "block";
answer1.style.display = "block";
radio2.style.display = "block";
answer2.style.display = "block";
radio3.style.display = "block";
answer3.style.display = "block";
answer3.style.display = "block";
review.style.display = "none";
results.style.display = "none";
resultMessage.style.display = "none";
next.style.display = "inline-block";
myProgress.style.display = "none";
myBar.style.display = "none";
}
function showRev() {
if (check3==1) {
if (wrongAnswers.includes(curQuesNum)) {
var image2 = document.getElementById('img2');
image2.src = "cross.jpg";
correctAnswer.style.display = "block";
} else{
var image2 = document.getElementById('img2');
image2.src = "tick.jpg";
correctAnswer.style.display = "none";
}
}
}
function submits() {
checkinput()
curQuesNum++
move()
retry.style.display = "inline-block";
question.style.display = "none"
radio1.style.display = "none"
answer1.style.display = "none"
radio2.style.display = "none"
answer2.style.display = "none"
radio3.style.display = "none"
answer3.style.display = "none"
previous.style.display = "none"
submit.style.display = "none"
review.style.display = "inline-block";
showResults()
}
function selectRadio() {
var temp=inputAnswers[curQuesNum]
if (temp=="a") {
document.getElementById("rad1").checked = true;
}
if (temp=="b") {
document.getElementById("rad2").checked = true;
}
if (temp=="c") {
document.getElementById("rad3").checked = true;
}
}
function retrys() {
location.reload()
}
function showNext() {
checkinput()
if (check1==0){
move();
} else {
check1++;
}
curQuesNum++
clearRadio()
selectRadio()
showRev()
showQuiz()
}
function showPrev() {
check1--
checkinput()
curQuesNum--
clearRadio()
selectRadio()
showRev()
showQuiz()
}
function main() {
intil()
showQuiz()
}
main()
@import url(https://fonts.googleapis.com/css?family=Work+Sans:300,600);
#myProgress {
margin:20px;
width: 90%;
background-color: #ddd;
text-align: center;
outline-style: solid;
}
.progress {
margin-left: auto;
margin-right:auto;
}
#myBar {
width: 5%;
height: 40px;
background-color: #38a;
text-align: center;
line-height: 40px;
color: black;
}
#img1{
display: block;
max-height:35%
height: auto;
margin-left: auto;
margin-right: auto;
max-width: 25%;
}
#resultMessage{
font-weight: 300;
margin: 0px;
font-size: 30px;
background-color: #f8f6f0;
color: black;
}
#question{
font-weight: 200;
margin: 20px;
font-size: 25px;
background-color: #f8f6f0;
color: black;
}
#correctAnswer{
font-weight: 200;
margin: 20px;
font-size: 20px;
background-color: #f8f6f0;
color: black;
font-style: italic;
}
#img2{
display: inline-block;
max-height:5%
height: auto;
margin-left: auto;
margin-right: auto;
max-width: 5%;
}
h1{
font-weight: 300;
margin: 0px;
padding: 10px
font-size: 30px;
background-color: #444;
color: #fff;
}
button{
font-family: 'Work Sans', sans-serif;
font-size: 22px;
background-color: #279;
color: #fff;
border: 0px;
border-radius: 3px;
padding: 20px;
cursor: pointer;
margin-bottom: 20px;
margin-top: 20px;
}
button:hover{
background-color: #38a;
}
<h1>Test Your Knowledge</h1>
<div id="question"></div>
<div id="radio1"><input type="radio" name="mcq" id="rad1" value="a"></div>
<div id="answer1"></div>
<div id="radio2"><input type="radio" name="mcq" id="rad2" value="b"></div>
<div id="answer2"></div>
<div id="radio3"><input type="radio" name="mcq" id="rad3" value="c"></div>
<div id="answer3"></div>
<img src="tick.jpg" alt="tickcross" id="img2">
<div id="correctAnswer"></div>
<div id="resultMessage"></div>
<div id="results"></div>
<img src="gold.jpg" alt="medal" id="img1">
<div id="myProgress" class="progress">
<div id="myBar">0%</div>
</div>
<button id="previous">Previous Question</button>
<button id="next">Next Question</button>
<button id="submit">Submit Quiz</button>
<button id="review">Review</button>
<button id="retry">Retry</button>
请帮助我处理 css 或 html 的任何调整。
解决方案
我会使用<label>
元素,以便可以使用点击捕获功能,并且 as <div>
s 默认设置为块,完全跳过它们。(您不需要 css 来实现基本对齐)。例如
<div id="radio1">
<input type="radio" name="mcq" id="rad1" value="a"/>
<label for="rad1" id="answer1">Answer 1...</label>
</div>
<div id="radio2">
<input type="radio" name="mcq" id="rad2" value="b"/>
<label for="rad2" id="answer2">Answer 2...</label>
</div>
<div id="radio3">
<input type="radio" name="mcq" id="rad3" value="c"/>
<label for="rad3" id="answer3">Answer 3...</label>
</div>
推荐阅读
- python - 对象数组的 Python JSON 模式验证
- python - python中的eyed3 mp3元数据
- android - 如何使用 Moshi/Retrofit 反序列化原始 JSON 对象
- spring-boot - Spring Boot - 转换响应对象/json - 将对象的数组列表展平为 DAO
- python - 我需要在这里为 kwargs 赋予什么价值?
- swift - 从不同视图添加新项目时,SwiftUI ObservedObject 不会更新
- sql - 多个表的功能
- forms - ExtJS 7.2 - 将记录加载到具有链接组合框和 forceSelection:true 的表单中不会加载所有值
- javascript - axios调用给无限循环
- python - 多处理池线程父函数?