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

Question

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

对guys/gals，我正在为我的网站制作粘性栏，从图片中您会看到社交栏未对齐。请参阅附图。（很长）

我用过：

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

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

如果有人能提出一个模糊的修复建议，或者更好的是为什么它没有正确对齐，我将非常感激。

谢谢

Answer 1

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

#footerlist {
    padding-left:0;
}

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

Alignment issues with social bar in CSS (bootstrap) class="sticky-bar"

html

css

twitter-bootstrap

footer

sticky-footer