定位一些图标的新手 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 对齐这样的操作相比，这可能是一个草率的解决方案。

Answer 2

上述解决方案将解决问题，但它们似乎更有可能是黑客， p 和 ul 是块元素，默认不在同一行。 您需要将现有的 CSS 规则替换为如下设置的 CSS

.mainFooter p {
color: #3399FF;
display: inline-block;
margin: 9px;
}

.mainFooter ul {
display: inline-block;
float: right;
list-style: none;
margin: 0 auto;
}

.mainFooter img {
width: 30px;
height: 30px;
margin: 5px;
}

每个浏览器图标不需要单独的规则，使用相同宽度和高度的图标。

Answer 3

只需将版权部分的css文件中的.floatericons中的浮动设置更改为左侧即可。

.footerIcons { 
float: left;
height: 9px; }

添加这部分：

.footerIcons ul {
position: relative;
top: -47px;
left:600px;
float:right;}

Answer 4

我可以想到多种方法来实现这一点。

这行得通：

<footer class="mainFooter">
  <ul>
    <li style="float:left"><a href="http://cowboy0629.ddns.net" title="cowboydesign.com">Copyright © 2017 cowboyDesigns.com</a></li>
    <li style="float:right"><img class="chrome" src="images/icons/black-chrome-icon.png" alt=""></li>
    <li style="float:right"><img class="firefox" src="images/icons/black-firefox-icon.png" alt=""></li>
    <li style="float:right"><img class="safari" src="images/icons/black-safari-icon2.png" alt=""></li>
  </ul>         
</footer>

它可以在垂直对齐方面使用一点爱，但它确实有效。

我不会将导航栏中的链接设置为display:inline，因为这会使它们更难点击（因为它们不会填满它们周围的块）...我还使用实用 CSS 浮动类，而不是内联样式.

浮动和定位是 CSS 中最难学习的东西之一，但有一种简单快捷的方法可以解决它。

看看这个video on using Chrome DevTools as an IDE

您不仅可以实时查看更改，甚至可以将它们映射回源文件，以便保存您所做的更改。

或者您可以只使用一个框架，该框架可以直接解决此类问题。我是 Foundation 的忠实粉丝，grid and alignment classes 非常适合解决这个问题。

看来你是为学校做的，所以也许你不能使用框架，但你可以看看他们是如何解决问题的以及他们使用了什么代码。

Answer 5

只需在您创建的基础上构建，您将拥有类似于此的内容：

footer {
  width: 97%;
  height: 40px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background-color: #141476;
  margin: 2% 1.5%;
}
footer p,
.footerIcons{
  line-height: 20px;
  margin: 9px;
}
footer p{
  float: left;
  color: #3399FF;
}
.footerIcons { 
  float: right;
}
.footerIcons img.firefox,
.footerIcons img.safari,
.footerIcons img.chrome{
  width: auto;
  height: 23px;
}

<footer>
  <p>Copyright &copy; 2017 <a href="http://cowboy0629.ddns.net" title="cowboydesign.com" target="_blank">cowboyDesigns.com</a></p>
  <div class="footerIcons">
    <img class="chrome" src="images/icons/black-chrome-icon.png" alt="">
    <img class="firefox" src="images/icons/black-firefox-icon.png" alt="">
    <img class="safari" src="images/icons/black-safari-icon2.png" alt="">
  </div>	
</footer>