html - 新手 HTML5 和 CSS3 问题与定位一些图标

Question

我是 HTML5 和 CSS 的新手，自从 HTML 首次出现以来我就是新手

无论如何，我目前正在学习如何使用 HTML5 和 CSS3 编写代码......但遇到了障碍......

我想在页脚背景的左侧获得我的复制权信息，在我的页脚背景的右侧获得我的浏览器图标....我已经解决了 9 个小时的问题我不会轻易放弃甚至尝试了我在这里找到的一些建议，但没有用...

如果您想查看实际页面，您可以转到 http://cowboy0629.ddns.net/test

.mainFooter {
  width: 97%;
  float: left;
  height: 40px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  background-color: #141476;
  margin: 2% 1.5% 2% 1.5%;
}
.footerIcons img.chrome {
  width: auto;
  height: 20px;
}
.footerIcons img.firefox {
  width: auto;
  height: 23px;
}
.footerIcons img.safari {
  width: auto;
  height: 23px;
}
.footerIcons { 
  float: right;
  height: 9px;
}
.footerIcons ul {
  float: right;
  padding: 0;
  margin: 0 auto;
}
.footerIcons li {
  float: right;
  list-style:none;
  margin-left:5px;
}
.footerIcons span p {
  height: 20px;
  float: left;
  color: #3399FF;
  width: 97%;
  margin: 9px;
}

<footer class="mainFooter">
  <div class="footerIcons">
    <span>
    <p>Copyright &copy; 2017 <a href="http://cowboy0629.ddns.net" title="cowboydesign.com">cowboyDesigns.com</a></p>
    </span>

    <ul>			
      <li>
        <img class="chrome" src="images/icons/black-chrome-icon.png" alt="">
      </li>
      <li>
        <img class="firefox" src="images/icons/black-firefox-icon.png" alt="">
      </li>
      <li>
        <img class="safari" src="images/icons/black-safari-icon2.png" alt="">
      </li>
    </ul>
  </div>	
</footer>

Answer 1

您可以在 <ul> 上使用相对定位元素。

.footerIcons ul {
    position: relative;
    top: -47px;
}

与将容器大小设置为 30% 并使 div 对齐相比，这可能是一个草率的解决方案。