css - 列出彼此相邻的元素奇怪地移动了他们的位置

Question

我有一个页脚，其中列出的链接彼此相邻并用点分隔。 (仅在我的 JSFIDDLE 中提及此部分:

            <ul class="footer-titles">
                <li><a href="http://www.example.com/linkn/">ABC</a> •</li>
                <li><a href="http://www.example.com/asdasda/">DEF</a> •</li>
                <li><a href="http://www.example.com/asdasdasd/">GHI</a> •</li>
                <li style="padding: 0;"><a href="http://www.example.com/fghjfgnt/" style="padding-right: 0;">JKL</a></li>
            </ul>

http://jsfiddle.net/s28nko9t/

所以有时刷新时(是的，大多数时候没问题)，它看起来像这样:

问题是最后一项跳到了底部。为什么会发生这种情况以及如何解决这个问题？

Answer 1

可能是链接容器的宽度小于它们必须彼此整齐相邻的宽度。

为列表项提供固定的字体大小，例如 16 像素。

.site-footer .footer-titles {
    clear: both;
    text-align: center;
    margin: 0 auto;
    display: table;
    float: inherit;
    width: 55%;
    min-width: 240px
}