图标不在页脚中

Question

我想在我的网页底部创建带有社交图标的页脚。 我试过这个：

#footer {
    position: absolute;
    width: 100%;
    bottom: 0px;
    height: 40px;
    background: #111111;
}

#footer .social {
    vertical-align: middle;
}

#footer .social ul {
    list-style: none;
}

#footer .social li {
    float: left;
    padding-right: 5px;
    margin-top: 4px;
}

#footer .social li:hover{
    opacity: 0.7;
}

和HTML

<div id="wrapper">
    <div id="footer">
        <div class="social">
            <ul>
                <li><img  src="./images/footer/twitter.png" /></li>
                <li><img  src="./images/footer/email.png" /><li>
            </ul>
        </div>
    </div>

</div>

但结果如下：

感谢您阅读

Answer 1

不同的浏览器在称为用户代理样式表的浏览器中设置不同的默认CSS规则。

此处ul可能存在默认margin，您应将其重置为0;

在您的代码中，尝试添加：

#footer .social ul {
    margin:0;
}

或者您可以通过添加 reset.css 或 normalise.css （Google中的任何一个并查找）来重置整个用户代理样式。

Answer 2

将这些代码用于页脚ID。如果不让我知道，我想你要求这个：

#footer {
position: absolute;
width: 100%;
bottom: 0px;
height: 60px;
background: #111111;
}

您也可以添加#footer .social ul {margin:0;} @Prasanth K C表示。