Javascript 文本位于其他文本下方，而不是旁边，尽管我没有'；我没有使用任何奇怪的代码

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

演示：

有什么问题吗

    <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>

奎茨博克斯先生{
宽度：58%；
最大宽度：950px；
边框：1px灰色实体；
保证金：自动；
填充：10px；
边界半径：10px；
利润率最高：7%；
文本对齐：居中；
位置：相对位置；
}
奎茨泰勒先生{
右：50%；
}
.行{
文本对齐：左对齐；
左边距：10%；
}
测验
蛾是什么目的成员？
八角形
麻风病
鳞翅目
问题2
答复1
答复2
答复3
问题3
答复1
答复2
答复3
你的成绩是：__

fdf fdffdf
fd
document.getElementById（“form1”）.onsubmit=函数（e）{
e、 预防默认值（）；
variable=parseInt（document.querySelector（'input[name=“variable”]：checked'）。值）；
sub=parseInt（document.querySelector（'input[name=“sub”]：checked'）。值）；
con=parseInt（document.querySelector（'input[name=“con”]：checked'）。值）；
结果=变量+子项+con；
document.getElementById（“grade”）.innerHTML=结果；
var result2=“”；
如果（结果==0）{
结果2=“我认为你没有学习。”
};
如果（结果==33）{
result2=“您需要花费更多时间。请重试。”
};
如果（结果==66）{
result2=“我认为您可以做得更好。再试一次。”
};
如果（结果==99）{
result2=“非常好！”
};
document.getElementById（“grade2”）.innerHTML=result2；
return false；//不刷新页面是必需的；只需将其留在这里
}//这将结束提交函数
函数myFunction（）{
document.getElementById（“demo”）.innerHTML=“Hello World”；
}
hgf

只需添加float:right；对于span#demo元素

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

为“demo”

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>

答复1

---

当然，您还需要解决其他细节问题（比如在行div和演示跨距之间添加足够的边距，提供足够的宽度使跨距显示在同一行上，减小跨距的大小，给它一些颜色，等等），但是，这种方法达到了您最初的要求。

带有答案的范围插入行外。这就是为什么它从一条新的线路开始。是的，我也看到了，我现在在div里面做了，但它看起来真的很乱。