html - 溢出 : hidden not functioning as expected

标签 html css

<分区>

这个问题是由于错别字或无法再重现的问题引起的。虽然类似的问题可能是on-topic在这里，这个问题的解决方式不太可能帮助 future 的读者。

关闭 7 年前。

Improve this question

我已经检查了相关主题的答案，并尝试调整建议中的一些元素，但似乎无济于事。简介和问题项在放置在#myQuiz 维度之外时不会隐藏，其他任何项也不会隐藏。 index.html:

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

最佳答案

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

关于html - 溢出 : hidden not functioning as expected，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32408437/

上一篇：javascript - 将字体限制为某种语言

下一篇：html - 文本对齐证明不适用于 add_shortcode 生成的元素

相关文章：

html - 网站标题的语义标记，即使有大纲

php - 从 HTML 表单发送电子邮件

html - CSS从左到右滑动面板

css - 为什么我的文本中间有一个换行符？

html - "Background-size: "不影响背景图像 HTML CSS Flask

html - 使用多文件输入时如何限制选择的最大文件数

javascript - 如何使用 JQUERY AJAX 和 HTML 每 30 秒读取并显示 XML 数据

HTML anchor 按钮问题

html - 当 li 是 inline-block 时，CSS li 元素符号不显示

javascript - 使用 href ="#id"时添加 padding-top 滚动

©2024 IT工具网  联系我们