关于边界的测试用例失败

Question

这是我用 Udacity（交易卡）做的一个实验室。 我在提交项目时遇到错误。 我给了整张卡的边框，但测试结果显示我没有给边框。 我把整张卡片放在 div 里面

<div class="animal-whole">

并放置这个 css，它确实在整个卡片周围放置了边框。 但我仍然得到测试用例结果失败

  .animal-whole{
    border: 1px solid gray;
}

我已经附上整个 HTML CSS 代码的测试结果

测试结果图像。

这是 HTML 文件。

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
      <link rel="stylesheet" type="text/css" href="styles.css">
        <title>Building the Prototype</title>
    </head>
    <body>
        <div id="container">
            <!-- start -->
            <div class="animal-whole">
                <div class="animal-name">
                    <h1>Dog</h1>
                </div>

                <img id = "imgId" src="http://www.printesta.com/image/cache/catalog/new/CMS_Creative_164657191_Kingfisher-780x520.jpg" alt="dog" width="300px;">

                <div id="card" class="animal-info">

                    <p  id="interesting-fact">A layer of mucus on the dog's skin makes it immune to the fish-eating anemone's lethal sting.</p>
                    <ul id="facts">
                        <li id="dogBorder"><span>Scientific Name</span> Dog</li>
                        <li><span>Average Length</span> 40 centimeters</li>
                        <li><span>Average Lifespan</span> 15 years</li>
                        <li><span>Habitat</span>: I dont know</li>
                    </ul>
                </div>
                <p id="summary">Bright orange with three distinctive white bars, clown anemonefish are among the most recognizable of all reef-dwellers. They reach about 31 centimeters in length, and are named as Dog</p>
            </div>
            <!-- end -->

        </div>

    </body>
    </html>

这是 CSS 文件

#interesting-fact{
    font-style: italic;
}

li{
    font-weight: bold;
    list-style: none;
}

#imgId{
    width: 300px;
}

#imgId{

 padding: 5px;
}

.animal-info{
    border: 1px solid gray;
    padding:5px;
}

.animal-name{
    padding: 5px;
}

.animal-whole{
    border: 1px solid gray;
}

Answer 1

在 id 为container的 div 上应用类animal-whole 。

Answer 2

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
      <link rel="stylesheet" type="text/css" href="styles.css">
        <title>Building the Prototype</title>
<style>
    #interesting-fact{
    font-style: italic;
}

li{
    font-weight: bold;
    list-style: none;
}

#imgId{
    width: 300px;
}

#imgId{

 padding: 5px;
}

.animal-info{
    border: 1px solid gray;
    padding:5px;
}

.animal-name{
    padding: 5px;
}

.animal-whole{
    border: 1px solid gray;
}
</style>
    </head>
    <body>
        <div id="container">
            <!-- start -->
            <div class="animal-whole" id="animal-whole">
                <div class="animal-name">
                    <h1>Dog</h1>
                </div>

                <img id = "imgId" src="http://www.printesta.com/image/cache/catalog/new/CMS_Creative_164657191_Kingfisher-780x520.jpg" alt="dog" width="300px;">

                <div id="card" class="animal-info">

                    <p  id="interesting-fact">A layer of mucus on the dog's skin makes it immune to the fish-eating anemone's lethal sting.</p>
                    <ul id="facts">
                        <li id="dogBorder"><span>Scientific Name</span> Dog</li>
                        <li><span>Average Length</span> 40 centimeters</li>
                        <li><span>Average Lifespan</span> 15 years</li>
                        <li><span>Habitat</span>: I dont know</li>
                    </ul>
                </div>
                <p id="summary">Bright orange with three distinctive white bars, clown anemonefish are among the most recognizable of all reef-dwellers. They reach about 31 centimeters in length, and are named as Dog</p>
            </div>
            <!-- end -->

        </div>

    </body>
    </html>

Answer 3

#interesting-fact{
    font-style: italic;
}

li{
    font-weight: bold;
    list-style: none;
}

#imgId{
    width: 300px;
}

#imgId{
    padding: 5px;
}

.animal-info{
    border: 1px solid gray;
    padding: 5px;
}

.animal-name{
    padding: 5px;
}

.animal-whole{
    border: 1px solid gray;
}

Answer 4

  <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
      <link rel="stylesheet" type="text/css" href="styles.css">
        <title>Building the Prototype</title>
 </head>
        <body>
            <div id="container">
                <!-- start -->
                <div class="animal-whole" id="animal-whole">
                    <div class="animal-name">
                        <h1>Dog</h1>
                    </div>

                    <img id = "imgId" src="http://www.printesta.com/image/cache/catalog/new/CMS_Creative_164657191_Kingfisher-780x520.jpg" alt="dog" width="300px;">

                    <div id="card" class="animal-info">

                        <p  id="interesting-fact">A layer of mucus on the dog's skin makes it immune to the fish-eating anemone's lethal sting.</p>
                        <ul id="facts">
                            <li id="dogBorder"><span>Scientific Name</span> Dog</li>
                            <li><span>Average Length</span> 40 centimeters</li>
                            <li><span>Average Lifespan</span> 15 years</li>
                            <li><span>Habitat</span>: I dont know</li>
                        </ul>
                    </div>
                    <p id="summary">Bright orange with three distinctive white bars, clown anemonefish are among the most recognizable of all reef-dwellers. They reach about 31 centimeters in length, and are named as Dog</p>
                </div>
                <!-- end -->

            </div>

        </body>
        </html>

Answer 5

这是 CSS 文件，这是 HTML 文件

/* add your CSS here */
#interesting-fact{font-style:italic;}
#facts{list-style-type:none;}
span{
  padding: 10px 50px 20px;
  font-weight:bold;}
h1{
  padding: 10px 50px 20px;}

#container{
  padding: 1px 5px 2px;
  border:3px solid black;}
#card{
  padding: 1px 5px 2px;
  border:3px solid black;}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
  <meta charset="utf-8">
  <title>Building the Prototype</title>

</head>

<body>
  <div id="container">
    <h1>Uromastyx</h1>
    <!-- photo credit: wikipedia.org, image taken by Ritik -->
    <img style="width:300px"src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/Blumeng%C3%A4rten_Hirschstetten_2016-02-21_Dornschwanzagame_%28Uromastyx_geyri%29_c.jpg/1024px-Blumeng%C3%A4rten_Hirschstetten_2016-02-21_Dornschwanzagame_%28Uromastyx_geyri%29_c.jpg" alt="Uromastyx">
    <div id="card" class="animal-info">
      <p id="interesting-fact">Uromastyx is a genus of African and Asian agamid lizards, the member species of which are commonly called spiny-tailed lizards, uromastyces, mastigures, or dabb lizards. Lizards in the genus Uromastyx are primarily herbivorous, but occasionally eat insects and other small animals, especially young lizards. They spend most of their waking hours basking in the sun, hiding in underground chambers at daytime or when danger appears. They tend to establish themselves in hilly, rocky areas with good shelter and accessible vegetation.
</p>
      <ul id="facts">
        <li>
          <span>Scientific Name</span>: Uromastyx
        </li>
        <li>
          <span>Average Length</span>:10 centimeters
        </li>
        <li>
          <span>Average Lifespan</span>: 15 years
        </li>
        <li>
          <span>Habitat</span>: Africa and the Middle East
        </li>
      </ul>
      <p id="summary">Uromastyx is a genus of African and Asian agamid lizards, the member species of which are commonly called spiny-tailed lizards, uromastyces, mastigures, or dabb lizards. Lizards in the genus Uromastyx are primarily herbivorous, but occasionally eat insects and other small animals, especially young lizards
      </p>
    </div>
  </div>
</body>

</html>

关于边界的测试用例失败

问题描述

5 个解决方案

解决方案1
4 已采纳 2018-05-28 05:27:13

解决方案2
0 2018-05-28 05:09:06

解决方案3
0 2019-12-06 08:18:38

解决方案4
0 2019-12-06 08:21:43

解决方案5
0 2019-12-28 16:56:23

关于边界的测试用例失败

问题描述

5 个解决方案

解决方案1 4 已采纳 2018-05-28 05:27:13

解决方案2 0 2018-05-28 05:09:06

解决方案3 0 2019-12-06 08:18:38

解决方案4 0 2019-12-06 08:21:43

解决方案5 0 2019-12-28 16:56:23

解决方案1
4 已采纳 2018-05-28 05:27:13

解决方案2
0 2018-05-28 05:09:06

解决方案3
0 2019-12-06 08:18:38

解决方案4
0 2019-12-06 08:21:43

解决方案5
0 2019-12-28 16:56:23