Question

我想知道是否可以将页脚移到页面底部，而不是像此处Image那样显示在侧面上，基本上我希望它功能与大多数其他元素一样，并且始终显示在其上方的元素下方。

这是我使用的代码

<a href="Builders.html" style="color:#000000"><div style="border:3px solid black;width:800px;float:left;margin:5%"><center><h1>Builder</h1><br><p style="padding-left:5%;padding-right:5%">We are looking for someone who can offer their building skills and abilities to a passionate team.</p></center></div></a>

<a href="Programming.html" style="color:#000000"><div style="border:3px solid black;width:800px;float:left;margin:5%"><center><h1>Plugin Developer</h1><br><p style="padding-left:5%;padding-right:5%">Are you passionate about programming? Well if you are we would like your help on Plugin Development!.</p></center></div></a>

<!--End of body!-->

<footer>

   <style>
     .mar {
        margin-left:10px;
        margin-right:10px;
     }
   </style>

   <ul>     
      <li><a href="https://discord.gg/eTgnFHQ"><img src="Images/Discord.png" alt="Discord" height="35px" width="35px" class="mar"></a></li>
      <li><a href="https://www.instagram.com/hoshko_studios/"><img src="Images/Instagram.png" alt="Instagram" height="35px" width="35px" class="mar"></a></li>
      <li><a href="https://www.youtube.com/channel/UCW_VW4njx6-d1jYDm2rlXoQ"><img src="Images/Youtube.png" alt="YouTube" height="35px" width="50px" class="mar"></a></li>
      <li><a href="https://twitter.com/HoshkoStudios?s=09"><img src="Images/Twitter.png" alt="Twitter" height="35px" width="35px" class="mar"></a></li>
   </ul>

Answer 1

尝试添加此代码。

<style>

 ul{
    float:left;
    width:100%;
    display:inline-block;
 }

 li{
    width: 25%;
    float: left;
    display: inline-block;
    list-style: none;
 }

</style>

Answer 2

尝试此代码

CSS：

footer {
    width: 100%;
    display: inline-block;
}
footer ul li {
    display: inline-block;
}

HTML页脚样式

2 个答案: