CSS (bootstrap) class="sticky-bar" 中社交栏的对齐问题

Question

免责声明：我是一名 Python 编码员，正在学习使用 CSS/html 等

正确的家伙/女孩，我正在为我的网站制作一个粘性栏，从图片中您会看到社交栏未对齐。请看附图。 （很长）

我用过：

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