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

只需调整填充以控制项目的间距

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

使用图标创建页脚

2 个答案: