文章/答案/技术大牛

发布

社区首页 >问答首页 >菜鸟HTML5 & CSS3定位一些图标的问题

问菜鸟HTML5 & CSS3定位一些图标的问题
EN

Stack Overflow用户

提问于 2017-02-24 02:49:15

回答 5查看 58关注 0票数 0

我是HTML5的新手&当它第一次出现的时候我就开始使用它了。

无论如何，我目前正在学习如何用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>

html

image

css

footer

text-align

回答 5

Stack Overflow用户

回答已采纳

发布于 2017-02-24 05:39:43

上面的解决方案将解决这个问题，但它们似乎更有可能是黑客，p和ul是块元素，默认情况下它们将不在一行。

.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;
}

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

票数 0

Stack Overflow用户

发布于 2017-02-24 02:53:27

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

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

这可能是一个草率的解决方案，而不是做一些事情，如将容器大小设置为30%，并使div对齐。

票数 1

Stack Overflow用户

发布于 2017-02-24 03:02:41

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

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

增加本部分：

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/42429902

复制

相似问题

问菜鸟HTML5 & CSS3定位一些图标的问题
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问菜鸟HTML5 & CSS3定位一些图标的问题EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问菜鸟HTML5 & CSS3定位一些图标的问题
EN