Question

我做了一个小测验，问题出在你点击提交后前3个答案后的蓝色文字看起来很乱。他们不是从同一个开始位置。我试图让它与边缘一起工作，但没有成功。

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



  .row {
    text-align: left;
    margin-left: 10%;
  }

  span#demo, #demo2, #demo3 {
    display: inline;
    color: blue;
    margin-left: 10%;
  }
</style>


<div class="quizbox">

  <!-- open main div -->
  <h1>Quiz</h1>
  <form id="form1" action=" ">
      <div class="row"> <h3>Moths are a member of what order?</h3></div>
      <div class="row">
        <input name="variable" type="radio" value="0" />Octagon <span id="demo"></span></div>
      <div> </div>
      <div class="row">
        <input name="variable" type="radio" value="0" />Leprosy <span id="demo2"></span></div>
      <div class="row">
        <input name="variable" type="radio" value="33" />Lepidoptera <span id="demo3"></span></div>
      &nbsp;
     <div class="row"> <h3>Question 2</h3></div>
      <div class="row">
        <input name="sub" type="radio" value="33" />Answer 1  </div> 
      <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;
      <div class="row"><h3>Question 3</h3></div>
      <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>
   <p> <input type="submit" onclick="myFunction()" value="Submit" /> </p>
  </form>Your grade is: <span id="grade">__</span>
  <p id="grade2"></p>

</div>
<!-- close quizbox 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 = "An octagon is an object with 8 sides to it";
    document.getElementById("demo2").innerHTML = "Leprosy is a chronic infection";
    document.getElementById("demo3").innerHTML = "Yes ! this is correct";  

  }
</script>

hgf
<div> </div>

Answer 1

使宽度为50％并使其向右浮动：

span#demo, #demo2, #demo3 {
    display: inline;
    color: blue;
    margin-left: 10%;
    float:right;
    width:50%;
  }

带文字的行不会在同一个地方开始

1 个答案: