列出彼此相邻的物品奇怪地移出他们的位置

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
}