javascript - 文本在其他文本下方而不是旁边，尽管我没有使用任何奇怪的代码

Question

我做了一个测验，计划是当你点击提交时，答案旁边会出现一些文本，提供更多信息。但是现在，当我点击提交时，信息显示在答案下方而不是旁边。提交后可以看到问题2答案1中的问题。

演示:https://plnkr.co/edit/OvcwBzfFte4A0F0NbNSi?p=preview

可能是什么问题？

    <style>
  .quizbox {
    width: 58%;
    max-width: 950px;
    border: 1px gray solid;
    margin: auto;
    padding: 10px;
    border-radius: 10px;
    margin-top: 7%;
    text-align: center;
    position: relative;
  }

  .quizstyle {
    padding-right: 50%;
  }

  .row {
    text-align: left;
    margin-left: 10%;
  }
</style>

<div class="quizbox">

  <!-- open main div -->
  <h1>Quiz</h1>
  <form id="form1" action=" ">
    <div class="quizstyle">
      <h3>Moths are a member of what order?</h3>
      <div class="row">
        <input name="variable" type="radio" value="0" />Octagon</div>
      <div> </div>
      <div class="row">
        <input name="variable" type="radio" value="0" />Leprosy</div>
      <div class="row">
        <input name="variable" type="radio" value="33" />Lepidoptera</div>
      &nbsp;
      <h3>Question 2</h3>
      <div class="row">
        <input name="sub" type="radio" value="33" />Answer 1</div> <span id="demo"></span>
      <div class="row">
        <input name="sub" type="radio" value="0" />Answer 2</div>
      <div class="row">
        <input name="sub" type="radio" value="0" />Answer 3</div>
      &nbsp;
      <h3>Question 3</h3>
      <div class="row">
        <input name="con" type="radio" value="0" />Answer 1</div>
      <div class="row">
        <input name="con" type="radio" value="33" />Answer 2</div>
      <div class="row">
        <input name="con" type="radio" value="0" />Answer 3</div>
    </div>
    <input type="submit" onclick="myFunction()" value="Submit" />

  </form>Your grade is: <span id="grade">__</span>
  <p id="grade2"></p>

</div>
<!-- close main div -->


<span>fdf</span> <span>fdf</span><span>fdf</span>
fd
<script>
  document.getElementById("form1").onsubmit = function(e) {
      e.preventDefault();
      variable = parseInt(document.querySelector('input[name = "variable"]:checked').value);
      sub = parseInt(document.querySelector('input[name = "sub"]:checked').value);
      con = parseInt(document.querySelector('input[name = "con"]:checked').value);

      result = variable + sub + con;

      document.getElementById("grade").innerHTML = result;
      var result2 = "";
      if (result == 0) {
        result2 = "I don't think you studied."
      };
      if (result == 33) {
        result2 = "You need to spend more time. Try again."
      };
      if (result == 66) {
        result2 = "I think you could do better. Try again."
      };
      if (result == 99) {
        result2 = "Excellent!"
      };
      document.getElementById("grade2").innerHTML = result2;

      return false; // required to not refresh the page; just leave this here
    } //this ends the submit function
  function myFunction() {
    document.getElementById("demo").innerHTML = "Hello World";
  }
</script>

hgf
<div> </div>

Answer 1

通过这几处更改，文本“Hello World”将显示在答案旁边。

为“演示”span 标签添加一个 css 以保持内联。

span#demo {
    display: inline;
}
/* A small bonus */
.quizstyle {
    padding-right: 20%;
}

将它移动到您的“行”div 标签内。

<div class="row">
    <input name="sub" type="radio" value="33" />Answer 1
    <span id="demo"></span>
</div>

当然，您必须解决其他细节(例如在行 div 和演示跨度之间添加足够的边距，为跨度提供足够的宽度以显示在同一行上，减小它的大小，给它一些颜色，等)，但这种实现了您最初的要求。