如何使用 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

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

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

Answer 2

尝试查看 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 3

我认为可以使用 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>

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

How do I add corner logos into Footer using Html & CSS?

html

css

image

add

footer