html - 图标不在页脚中

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 任何这些并找到)来重置整个用户代理样式。