新手 HTML5 & CSS3 关于定位一些图标的问题

Question

我是 HTML5 和 CSS 的新手，也是 HTML 第一次接触

之后的新手

无论如何，我目前正在努力学习如何在 HTML5 和 CSS3 中编码。但是运行遇到了障碍...

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

如果您想查看实际页面，可以转到 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

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

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

添加这部分：

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

Answer 3

我可以想到多种方法来完成此任务。

这个有效：

<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 4

上述解决方案可以解决问题，但它们似乎更有可能是黑客攻击， 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 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>

新手 HTML5 & CSS3 关于定位一些图标的问题

Newbie HTML5 & CSS3 issue with Locating some icons

html

css

image

text-align

footer