CSS中的社交栏的对齐问题（bootstrap）class =“sticky-bar”

Question

免责声明：我是一名学习使用CSS / html等的Python编码器

正确的家伙/加尔斯，我正在为我的网站工作一个粘性条，从图片中你会看到社交栏是错误对齐的。请参阅附图。 （很长）

我用过：

* {border: dashed blue 1px;}

在CSS中查看我的div是否未正确对齐，但它们似乎没问题。

这是有问题的html（已删除链接）：

<div class="sticky-bar">
    <div class="sticky-bar-inner">
        <p>&#169;2015 The astrobox.io Project<p>
        <ul id="footerlist">
            <li class="social"><a href="#"><img src="some link" width="42" height="42"></img></a></li>
            <li class="social"><a href="#"><img src="some link" width="42" height="42"></img></a></li>
            <li class="social"><a href="#"><img src="some link" width="42" height="42"></img></a></li>
        </ul>
    </div>
</div>

有问题的CSS是：

.sticky-bar {
    background: #000000;
    bottom: 0;
    color: #ffffff;
    font-weight: 600;
    left:0;
    margin: 0;
    opacity: 0.95;
    padding: 0em;
    position:fixed;
    width: 100%;
    z-index:99999;
}

.sticky-bar-inner {
    margin:0 auto;
    text-align: center;
    width:100%;
    background-color: #ffffff;
    padding: 3px;
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    color: #000000;
}

.sticky-bar-inner p {
    margin:0 auto;
    padding: 3px;
    text-align: center;
    width:100%;
}

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

图像也是512x512用src固定到42x42（这可能是一个原因）并且它们是同质的并且作为一组。

如果有人可以建议一个软糖修复或更好仍然为什么它没有正确对齐我会非常感激。

三江源

Answer 1

你的列表有默认的填充，你应该删除它，因为它将内容推到右边一点：

#footerlist {
    padding-left:0;
}