如何一致地对齐文本和复选框？

Question

我正在做一个小测验。我的问题是，当生成第一个问题时，文本和复选框未正确对齐。 所有其他问题都没问题。如果我刷新页面也很好。 起初我想也许我可以找到一种方法来自动刷新页面一次，但我想知道是否有更简单的东西。但是，如果这是唯一的方法，我都是耳朵。

var pos = 0,
  test, test_status, question, choice, choices, chA, chB, chC, correct = 0;
var questions = [
  ["Question 1?", "Answer A", "Answer B", "Answer C", "B"],
  ["Question 2?", "Answer A", "Answer B", "Answer C", "C"],
  ["Question 3?", "Answer A", "Answer B", "Answer C", "A"],
  ["Question 4?", "Answer A", "Answer B", "Answer C", "A"],
  ["Question 5?", "Answer A", "Answer B", "Answer C", "C"]
];

function _(x) {
  return document.getElementById(x);
}

function renderQuestion() {
  test = _("test");
  if (pos >= questions.length) {
    test.innerHTML = "<h2>You got " + correct + " of " + questions.length + " questions correct</h2>";
    _("test_status").innerHTML = "Test Completed";
    pos = 0;
    correct = 0;
    return false;
  }
  _("test_status").innerHTML = "Question " + (pos + 1) + " of " + questions.length;

  question = questions[pos][0];
  chA = questions[pos][1];
  chB = questions[pos][2];
  chC = questions[pos][3];
  test.innerHTML = "<h3>" + question + "</h3>";
  test.innerHTML += "<input style='float:left;' type='checkbox'  name='choices' value='A'><div style='margin-left: 25px;'>" + chA + "</div>";
  test.innerHTML += "<input style='float:left;' type='checkbox'  name='choices' value='B'><div style='margin-left: 25px;'>" + chB + "</div>";
  test.innerHTML += "<input style='float:left;' type='checkbox'  name='choices' value='C'><div style='margin-left: 25px;'>" + chC + "</div>";
  test.innerHTML += "<button onclick='checkAnswer()'>Submit Answer</button>";
}

function checkAnswer() {
  choices = document.getElementsByName("choices");
  for (var i = 0; i < choices.length; i++) {
    if (choices[i].checked) {
      choice = choices[i].value;
    }
  }
  if (choice == questions[pos][4]) {
    correct++;
  }
  pos++;
  renderQuestion();
}
renderQuestion();

<div id="test"></div>
<div id="test_status"></div>