Question

我已检查相关主题的答案，并试图调整建议中的一些项目，但似乎没有任何帮助。当放置在#myQuiz维度之外时，介绍和问题项目不会隐藏，也不会执行任何其他项目。的index.html：

＆＃13;

    @import url(http://fonts.googleapis.com/css?family=Titillium+Web:900|Roboto:400,100);
    body {
      background-color: #fff;
      padding: 20px;
    }
    #myQuiz {
      font-family: 'Roboto', sans-serif;
      font-size: 16px;
      font-weight: 400;
      width: 650;
      height: 650px;
      position: relative;
      overflow: hidden;
      color: #fff;
      background: #bbb url(../images/background.jpg) no-repeat 0px 0px;
    }
    #myQuiz h1 {
      font-weight: 100;
      font-size: 2em;
      text-transform: uppercase;
      margin: 0px;
      position: absolute;
      top: 25px;
      left: 36px;
    }
    #myQuiz h1 span {
      display: block;
      font-weight: 900;
      font-family: 'Titillium Web', sans-serif;
      font-size: 3.2em;
      line-height: 65px;
    }
    #myQuiz h2 {
      font-size: 3em;
      margin: 0px;
      font-weight: 100;
    }
    #myQuiz h3 {
      font-size: 2.4em;
      margin: 0px;
      font-weight: 100;
    }
    #myQuiz p {
      margin: 0px 0px 14px 0px;
    }
    #myQuiz .btn {
      display: inline-block;
      cursor: pointer;
      background-color: #c04b01;
      color: #fff;
      text-decoration: none;
      padding: 5px 15px;
      border-radius: 6px;
    }
    /* Intro */
    #myQuiz .intro {
      position: absolute;
      top: 225px;
      left: 660px;
      width: 550px;
    }
    #myQuiz .intro p {
      margin: 0px 0px 40x 0px;
    }
    /* Questions */
    #myQuiz .question {
      width: 550px;
      position: absolute;
      top: 225px;
      left: 650px;
    }
    #myQuiz .question .txt {
      font-size 1.6em;
      margin: 0px 0px 20px 0px;
    }
    #myQuiz .question .ans {
      display: inline-block;
      font-size: 1.1em;
      width: 225px;
      border: 2px solid rgba(238, 189, 102, .4);
      border-radius: 6px;
      padding: 10px;
      margin: 0px 15px 15px 0px;
      position: relative;
    }
    #myQuiz .ans.selected {
      border-color: #be4b16;
    }
    #myQuiz .ans.correct {
      border-color: #459a2e;
    }
    #myQuiz .question .ans::after {
      content: '';
      diplay: block;
      width: 20px;
      height: 20px;
      background: no-repeat 0px 0px;
      background-size: 20px 20px;
      position: absolute;
      top 5px;
      right: 5px;
    }
    #myQuiz .question .ans.selected::after {
      background-image: url(../images/icon_incorrect.svg);
    }
    #myQuiz .question .ans.correct::after {
      background-image: url(../images/icon_correct.svg);
    }
    #myQuiz .question.unanswered .ans {
      cursor: pointer;
    }
    #myQuiz .question.unanswered .ans:hover {
      background-color: rgba(238, 189, 102, .2);
    }
    #myQuiz .question.answered .ans {
      cursor: default;
    }
    /* Feedback */
    #myQuiz .feedback {
      color: #efbe5e;
      margin-top: 50px;
      transition: opacity 1.5s, margin-top 1.5s;
      visibility: hidden;
      opacity: 0;
    }
    #myQuiz .feedback .btn {
      margin-top: 5px;
    }
    #myQuiz .feedback strong {
      color: #fff;
    }
    #myQuiz .answered .feedback {
      visibility: visible;
      opacity: 1;
      margin-top: 10px;
    }

＆＃13;

<!DOCTYPE HTML>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-
    8">
  <meta name="viewport" content="width=device-width, initial-
    scale=1">
  <title>Test Your Knowledge: Saturn</title>
  <link rel="stylesheet" type="text/css" href="css/quiz.css">
</head>

<body>

  <div id="myQuiz">
    <h1>Test Your Knowledge:<span>Saturn</span></h1>
    <div class="progress"></div>
    <div class="intro">
      <h2>Welcome</h2>
      <p>Click begin to test your knowledge of Saturn</p>
      <p class="btn">Begin</p>
    </div>
    <!--intro-->
    <div class="question answered">
      <p class="txt">This is a question</p>
      <p class="ans">Answer 1</p>
      <p class="ans selected">Answer 2</p>
      <p class="ans correct">Answer 3</p>
      <p class="ans">Answer 4</p>
      <div class="feedback">
        <p>Your are <strong>correct</strong>.</p>
        <p>Oops! That is not correct.</p>
        <p>Addition feedback.</p>
        <div class="btn">Continue</div>
        <!--btn-->
      </div>
      <!--feedback -->
    </div>
    <!--question -->

    <div class="results"></div>

  </div>
  <!-- MyQuiz -->
</body>

</html>

＆＃13;

Answer 1

在#myQuiz上，您错过了宽度的单位，使其无效并被浏览器忽略。

你有

width: 650;

，一定是

width: 650px;

    @import url(http://fonts.googleapis.com/css?family=Titillium+Web:900|Roboto:400, 100);
    body {
      background-color: #fff;
      padding: 20px;
    }
    #myQuiz {
      font-family: 'Roboto', sans-serif;
      font-size: 16px;
      font-weight: 400;
      width: 650px;
      height: 650px;
      position: relative;
      overflow: hidden;
      color: #fff;
      background: #bbb url(../images/background.jpg) no-repeat 0px 0px;
    }
    #myQuiz h1 {
      font-weight: 100;
      font-size: 2em;
      text-transform: uppercase;
      margin: 0px;
      position: absolute;
      top: 25px;
      left: 36px;
    }
    #myQuiz h1 span {
      display: block;
      font-weight: 900;
      font-family: 'Titillium Web', sans-serif;
      font-size: 3.2em;
      line-height: 65px;
    }
    #myQuiz h2 {
      font-size: 3em;
      margin: 0px;
      font-weight: 100;
    }
    #myQuiz h3 {
      font-size: 2.4em;
      margin: 0px;
      font-weight: 100;
    }
    #myQuiz p {
      margin: 0px 0px 14px 0px;
    }
    #myQuiz .btn {
      display: inline-block;
      cursor: pointer;
      background-color: #c04b01;
      color: #fff;
      text-decoration: none;
      padding: 5px 15px;
      border-radius: 6px;
    }
    /* Intro */
    #myQuiz .intro {
      position: absolute;
      top: 225px;
      left: 660px;
      width: 550px;
    }
    #myQuiz .intro p {
      margin: 0px 0px 40x 0px;
    }
    /* Questions */
    #myQuiz .question {
      width: 550px;
      position: absolute;
      top: 225px;
      left: 650px;
    }
    #myQuiz .question .txt {
      font-size 1.6em;
      margin: 0px 0px 20px 0px;
    }
    #myQuiz .question .ans {
      display: inline-block;
      font-size: 1.1em;
      width: 225px;
      border: 2px solid rgba(238, 189, 102, .4);
      border-radius: 6px;
      padding: 10px;
      margin: 0px 15px 15px 0px;
      position: relative;
    }
    #myQuiz .ans.selected {
      border-color: #be4b16;
    }
    #myQuiz .ans.correct {
      border-color: #459a2e;
    }
    #myQuiz .question .ans::after {
      content: '';
      diplay: block;
      width: 20px;
      height: 20px;
      background: no-repeat 0px 0px;
      background-size: 20px 20px;
      position: absolute;
      top 5px;
      right: 5px;
    }
    #myQuiz .question .ans.selected::after {
      background-image: url(../images/icon_incorrect.svg);
    }
    #myQuiz .question .ans.correct::after {
      background-image: url(../images/icon_correct.svg);
    }
    #myQuiz .question.unanswered .ans {
      cursor: pointer;
    }
    #myQuiz .question.unanswered .ans:hover {
      background-color: rgba(238, 189, 102, .2);
    }
    #myQuiz .question.answered .ans {
      cursor: default;
    }
    /* Feedback */
    #myQuiz .feedback {
      color: #efbe5e;
      margin-top: 50px;
      transition: opacity 1.5s, margin-top 1.5s;
      visibility: hidden;
      opacity: 0;
    }
    #myQuiz .feedback .btn {
      margin-top: 5px;
    }
    #myQuiz .feedback strong {
      color: #fff;
    }
    #myQuiz .answered .feedback {
      visibility: visible;
      opacity: 1;
      margin-top: 10px;
    }

<!DOCTYPE HTML>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-
    8">
  <meta name="viewport" content="width=device-width, initial-
    scale=1">
  <title>Test Your Knowledge: Saturn</title>
  <link rel="stylesheet" type="text/css" href="css/quiz.css">
</head>

<body>

  <div id="myQuiz">
    <h1>Test Your Knowledge:<span>Saturn</span></h1>
    <div class="progress"></div>
    <div class="intro">
      <h2>Welcome</h2>
      <p>Click begin to test your knowledge of Saturn</p>
      <p class="btn">Begin</p>
    </div>
    <!--intro-->
    <div class="question answered">
      <p class="txt">This is a question</p>
      <p class="ans">Answer 1</p>
      <p class="ans selected">Answer 2</p>
      <p class="ans correct">Answer 3</p>
      <p class="ans">Answer 4</p>
      <div class="feedback">
        <p>Your are <strong>correct</strong>.</p>
        <p>Oops! That is not correct.</p>
        <p>Addition feedback.</p>
        <div class="btn">Continue</div>
        <!--btn-->
      </div>
      <!--feedback -->
    </div>
    <!--question -->

    <div class="results"></div>

  </div>
  <!-- MyQuiz -->
</body>

</html>

溢出：隐藏不按预期运行

1 个答案: