Question

我正在尝试自学CSS布局，但我不明白为什么此CSS规则不会影响段落元素的位置。

HTML

     <body>


    <p>Liza likes to call me first thing in the morning at 6am, it is    very funny.</p>

   <p class"relative">I drove a Lithuanian girl home this week and she told me about the clubs that she likes to go to like Raduga and Roka club.</p>

    <p>I was sleeping all day yesterday and all night last night, I just woke up and I want to get a coffee now</p>

     </body>

css

       p  {  background-color: pink;
             border-style: solid;
             border-radius: 5px;
             padding: 10px;
             border-color:red;
             margin:20px;}

        .relative {  position: relative;
                     left: 20px;
                     top: 20px;}

Answer 1

如您所见，您错过了class="relative"，两者之间应该相等。还有一个建议。请不要在课程中使用任何职位名称。 Check how to name class

p {
  background-color: pink;
  border-style: solid;
  border-radius: 5px;
  padding: 10px;
  border-color: red;
  margin: 20px;
}

p.relative {
  position: relative;
  left: 20px;
  top: 20px;
}

<body>


  <p>Liza likes to call me first thing in the morning at 6am, it is very funny.</p>

  <p class="relative">I drove a Lithuanian girl home this week and she told me about the clubs that she likes to go to like Raduga and Roka club.</p>

  <p>I was sleeping all day yesterday and all night last night, I just woke up and I want to get a coffee now</p>

</body>

为什么此CSS位置规则对P元素没有任何影响

1 个答案: