使用div时如何对齐单选按钮？

Question

对于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的任何调整帮助我。

Answer 1

您可以为此使用flexbox。

.wrapper {
  display: flex;
}

div[id^="answer"] {
  margin-left: 0.5rem;
}

<div class="wrapper">
  <div id="radio1"><input type="radio" name="mcq" id="rad1" value="a"></div>
  <div id="answer1">Answer 1</div>
</div>
<div class="wrapper">
  <div id="radio2"><input type="radio" name="mcq" id="rad2" value="b"></div>
  <div id="answer2">Answer 2</div>
</div>
<div class="wrapper">
  <div id="radio3"><input type="radio" name="mcq" id="rad3" value="c"></div>
  <div id="answer3">Answer 3</div>
</div>

Answer 2

我将使用<label>元素，以便可以使用点击捕获功能，并且由于<div>在默认情况下被设置为块样式，因此将其完全跳过。 （您不需要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>

Answer 3

您可以使用flexbox实现此目的。您需要通过单选按钮将div的答案包装在div中：

    <div id="radio1" style="display: flex;">
        <input type="radio" name="mcq" id="rad1" value="a">
        <div id="answer1">Answer 1</div>
    </div>

Answer 4

只需在广播div中添加style="float: left"

    <div id="radio1"><input type="radio" name="mcq" id="rad1" value="a" style="float: left"></div>
    <div id="answer1">Answer1</div>
    <div id="radio2"><input type="radio" name="mcq" id="rad2" value="b" style="float: left"></div>
    <div id="answer2">Answer2</div>
    <div id="radio3"><input type="radio" name="mcq" id="rad3" value="c" style="float: left"></div>
    <div id="answer3">Answer3</div>

Answer 5

尝试一下

.radio {
  display: flex;
  padding: 10px 0;
}

<div>
  <div class="radio">
    <input type="radio" name="mcq" id="rad1" value="a">
    <div id="answer1">Answer1</div>
  </div>

  <div class="radio">
    <input type="radio" name="mcq" id="rad2" value="b">
    <div id="answer2">Answer2</div>
  </div>

  <div class="radio"><input type="radio" name="mcq" id="rad3" value="c">
    <div id="answer3">Answer3</div>
  </div>
</div>

输出

Answer 6

尝试一下：

<div>
 <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
</div>