Question

这可能是一个愚蠢的问题，但我为我的页脚做了一个ul，但它出现在不在其中的部分下面。我不知道如何在我的照片旁边移动它。图片附有The footer

＆＃13;

#footer {
  background: #fdded9;
  height: 150px;
  width: 960px
}

.footerpic {
  display: block;
  padding-top: 20px;
  padding-left: 30px;
}

ul.copyright {
  display: block;
  list-style-type: none;
  font-family: 'Economica', sans-serif;
  font-size 15px;
}

＆＃13;

<section id="footer">
  <div class="footerpic">
    <a href="#"><img src="images/logotransparent.png" alt="pic3" width="100" height="100" /></a>

    <ul class="copyright">
      <li>About Us</li>
      <li>The Team</li>
      <li>Contact Us</li>
      <li>Privacy Policy</li>
    </ul>

</section>

＆＃13;

请帮助我不知道如何移动它，如果它填满了我不想在我的页脚下留下任何空白区域！

Answer 1

您在该部分设置height: 150px;。

由于内容高于150px，因此它开箱即用。

如果要扩展以包含内容，请将高度保留为auto。

Answer 2

因为您footer height:150px。{您的内容超过了该值。如果你删除它，一切都必须如你所愿。

Answer 3

您正在限制背景高度的部分设置高度。

您可能还想关闭列表后面。

   #footer {
      background: #fdded9;
      height: auto; /* 150px */
      width: 960px
    }

Answer 4

将display上的#copyright从block更改为inline-block。然后调整图像的垂直对齐方式。将显示设置为阻止会导致ul显示在图像的下一行。

＆＃13;

#footer {
  background: #fdded9;
  height: 150px;
  width: 960px
}

.footerpic {
  display: block;
  padding-top: 20px;
  padding-left: 30px;
}

.footerpic img {
  vertical-align: bottom;
}

ul.copyright {
  display: inline-block;
  list-style-type: none;
  font-family: 'Economica', sans-serif;
  font-size 15px;
}

＆＃13;

<section id="footer">
  <div class="footerpic">
    <a href="#"><img src="images/logotransparent.png" alt="pic3" width="100" height="100" /></a>

    <ul class="copyright">
      <li>About Us</li>
      <li>The Team</li>
      <li>Contact Us</li>
      <li>Privacy Policy</li>
    </ul>

</section>

＆＃13;

Answer 5

只需将float:left添加到CSS即可请参阅代码段。

#footer {
  background: #fdded9;
  height: 150px;
  width: 960px
}

.footerpic {
  display: block;
  float: left;
  padding-top: 20px;
  padding-left: 30px;
}

ul.copyright {
  display: block;
  list-style-type: none;
  font-family: 'Economica', sans-serif;
  font-size 15px;
}

<section id="footer">
  <div class="footerpic">
    <a href="#"><img src="images/logotransparent.png" alt="pic3" width="100" height="100" /></a>
  </div>
    <ul class="copyright">
      <li>About Us</li>
      <li>The Team</li>
      <li>Contact Us</li>
      <li>Privacy Policy</li>
    </ul>

</section>

Answer 6

使用内联块代替显示块，使其成为一行，如下所示

#footer {
    background: #fdded9;
    height:150px;
    width:960px
 }

.footerpic {
    display: inline-block;
    padding-top: 20px;
    padding-left: 30px;
 }

ul.copyright {
    display: inline-block;
    list-style-type: none;
    font-family: 'Economica', sans-serif;
   font-size 15px;
}

Answer 7

您可以将.footerpic设为flex行，它会将子元素并排放置，如果您想要分离，对齐等，可以使用其他flex属性。这是一个很好的参考https://css-tricks.com/snippets/css/a-guide-to-flexbox/

＆＃13;

#footer {
  background: #fdded9;
  height: 150px;
  width: 960px
}

.footerpic {
  display: flex;
  padding-top: 20px;
  padding-left: 30px;
}

ul.copyright {
  display: block;
  list-style-type: none;
  font-family: 'Economica', sans-serif;
  font-size 15px;
}

＆＃13;

<section id="footer">
  <div class="footerpic">
    <a href="#"><img src="images/logotransparent.png" alt="pic3" width="100" height="100" /></a>

    <ul class="copyright">
      <li>About Us</li>
      <li>The Team</li>
      <li>Contact Us</li>
      <li>Privacy Policy</li>
    </ul>

</section>

＆＃13;

为什么我的列表出现在我的部分而不是其中？

7 个答案: