如何使用 Html 和 CSS 将角标志添加到页脚中？

Question

因此，对于我的一个学校项目，我们必须使用 Html 和 CSS 设计一个网站，我遇到了一个问题，我不知道如何将 2 个徽标（左和右）放入页脚的角落.我试图改变位置、浮动、宽度等，但它似乎不起作用，标志似乎总是不在我想要的位置。对不起，如果这听起来很业余，因为我几周前才开始做 Html 和 CSS。

这是当前图像，其中徽标位于我的 ul 下方并且位置不正确。 -

这就是我希望页脚看起来的样子，将左侧“由 HP omen Gaming 赞助”的文字作为图像会很棒，因为我将来可能会将其换成另一个徽标。 -

提前感谢任何可以为我解决这个问题的人，下面是我的 html 和 CSS 代码。

.footer {
  background-color: #035642;
  margin-top: 10px;
  height: 60px;
  color: #efe5d0;
  text-align: center;
  padding: 15px;
  font-size: 100%;
  font-family: Arial;
  display: block;
}

.footer ul {
  padding: 5px;
  list-style-type: none;
  text-align: center;
  margin: 10px;
  overflow: hidden;
}

.footer li {
  text-decoration: none;
  text-align: center;
  font-family: arial;
  font-weight: bold;
  list-style-type: none;
  display: inline-block;
}

.footer ul li {
  display: inline-block;
}

.footer ul li a {
  text-decoration: none;
  padding: .2em 1em;
  color: #efe5d0;
  background-color: #5c755e;
  text-align: center;
  font-family: arial;
  font-weight: bold;
}

.footer ul li a:hover {
  color: #000;
  background-color: #fff;
}

#footer-right {
  height: 50px;
  width: auto;
  position: fixed;
  float: right;
}

<div class="footer">
  <li>WBHS ESPORTS</li>
  <ul>
    <li><a href=" " target="_blank">Facebook</a></li>
    <li>|</li>
    <li><a href=" " target="_blank">YouTube</a></li>
    <li>|</li>
    <li><a href=" " target="_blank">Twitch</a></li>
  </ul>

  <img src="hp-omen-logo.png" id="footer-right">

</div>

Answer 1

尝试查看flexbox。这是一个快速模板，可让您随心所欲。

.footer {
  display: flex;
  justify-content: space-between;
}

.center {
  text-align: center;
}

<div class="footer">
  <p>Left</p>
  <div class="center">
     <p>Some text</p>
     <p>Your list</p>
  </div>
  <p>Right</p>
</div>

Answer 2

我认为一个解决方案可以是使用 display:flex

为了更简洁，也尝试使用小部件，您可以在此示例中看到它是如何工作的。

.footer {
  background-color: #035642;
  margin-top: 10px;
  height: 60px;
  color: #efe5d0;
  text-align: center;
  padding: 15px;
  font-size: 100%;
  font-family: Arial;  
  display: block;
}

.footer ul {
  padding: 5px;
  list-style-type: none;
  text-align: center;
  margin: 10px;
  overflow: hidden;
}

.footer li {
  text-decoration: none;
  text-align: center;
  font-family: arial;
  font-weight: bold;
  list-style-type: none;
  display: inline-block;
}

.footer ul li {
  display: inline-block;
}

.footer ul li a {
  text-decoration: none;
  padding: .2em 1em;
  color: #efe5d0;
  background-color: #5c755e;
  text-align: center;
  font-family: arial;
  font-weight: bold;
}

.footer ul li a:hover {
  color: #000;
  background-color: #fff;
}

#footer-right {
  height: 50px;
  width: auto;
  position: fixed;
  float: right;
}


/*my-edit*/
#the-footer{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  height: auto;
  margin: 0;
  padding: 10px;
}
#the-footer .widget{
  width: 30%;
}
#the-footer .widget.left{
  text-align: left;
}
#the-footer .widget.right{
  text-align: right;
}
#the-footer .widget.center{
  text-align: center;
}
#the-footer .widget .title{
  font-weight: bold;
  letter-spacing: 2px;
}
#the-footer .widget .logo-link{
  color:#fff;
  display: inline-block;
  text-decoration: none;
  max-width:150px;
}
#the-footer .widget .logo-link:hover{
  color:#000;
}

<div class="footer" id="the-footer">
  <div class="widget left">
    <a class="logo-link" href="#" target="_blank">Sponsored by HP omen gaming</a>
  </div>
  <div class="widget center">
    <div class="title">WBHS ESPORTS</div>
    <ul class="footer-nav">
      <li><a href="#" target="_blank">Facebook</a></li>
      <li>|</li>
      <li><a href="#" target="_blank">YouTube</a></li>
      <li>|</li>
      <li><a href="#" target="_blank">Twitch</a></li>
    </ul>
  </div>
  <div class="widget right">
    <a class="logo-link" href="#" target="_blank"><img class="logo-footer" src="https://via.placeholder.com/60" alt="logo"></a>
  </div>
</div>

Answer 3

您可以使用display: grid 属性，这样您就可以将您的页脚分成 3 个部分

您可以在此处了解网格属性：https://www.w3schools.com/css/css_grid.asp