html - 创建带有图标的页脚

Question

我已经设法在我的网站上安装了一个静态页脚，但现在它只是一个空栏。我想在页脚中放置一排自定义社交媒体图标，以便它们水平地穿过我的页面底部。这是我到目前为止所拥有的：

CSS：

.sticky-bar {
background: #000;
bottom: 0;
color: #fff;
font-weight: 700;
left:0;
margin: 0;
opacity: 0.9;
padding: 0;
position:fixed;
width: 100%;
z-index:99999;
}

.sticky-bar-inner {
margin:0 auto;
padding: 20px 0;
text-align: center;
width:90%;
}

HTML：

<div class="sticky-bar">
<div class="sticky-bar-inner">
</div>

我只需要知道我需要添加什么来实现我的图标行，现在我的网站底部是一个空的黑条。www.salvageinteriors.com

提前感谢您的帮助！

Answer 1

实现此目的的一种方法是使用无序列表并水平显示它。

<ul id="footerlist">
    <li><a href="#"><img src="iconPinterest.jpg></img></a></li>
    <li><a href="#"><img src="iconfb.jpg></img></a></li>
    <li><a href="#"><img src="icongplus.jpg></img></a></li>
    <li><a href="#"><img src="icontwitter.jpg></img></a></li>
</ul>

CSS：

#footerlist li
{
  display: inline;
  list-style-type: none;
  padding-right: 30px;
}

只需调整 padding 即可控制项目的间距

Answer 2

你有未关闭的 div 先关闭那个 div。

<div class="sticky-bar">
<div class="sticky-bar-inner"><!--here--->
</div>

您可以像这样水平对齐图像

<div class="sticky-bar">
<div class="sticky-bar-inner"><img /><img /><img /></div>
</div>

并将其分配display: inline-block;给img