WP-filebase 中分页之间的空白

Question

我尝试在页面中设置 WP-filebase 分页样式。我在博客文章中使用了 WP-pagenavi，并让它看起来像我想要的那样：数字并排在框中。

由于我还没有找到将 WP-pagenavi 与 WP-filebase 一起使用的方法（我还读到它不适用于 WP 中的页面），因此我尝试将 WP-filebase 中的分页样式设置为看起来相同，但我只得到并排的方框中的数字，但它们之间有空白。

我尝试使用 margin-left 来摆脱空白，但后来我遇到了其他问题。悬停时的边框未显示在右侧。似乎这些框在右侧相互重叠。如何用 css 解决这个问题？

我的 CSS 看起来像这样：

    .tablenav-pages {
        clear: both;
        border-radius: 0;
        font-family: 'Gotham A','Gotham B', sans-serif;
        font-weight: 300;
        padding: 6px 14px;
        font-size: 15px;
    /*  margin-left: 6px;*/
    }
    .tablenav-pages a, .tablenav-pages span {
        text-decoration: none;
        color: #a30083;
        background-color: #fff;
        border: 1px solid #ddd;
        padding: 6px 14px;
    /*  margin-left: -6px;*/
    }
    .tablenav-pages a:hover {
        border-color: #a30083;
        background-color: #fff;
        padding: 6px 14px;
    }
    .tablenav-pages span.current {
        background-color: #a30083;
        border-color: #a30083;
        color: #fff;
        padding: 6px 14px;
     }
    div.tablenav-pages {
        padding-left: 0;
        padding-right: 0;
        float: left;
    }

Answer 1

艾拉，你的元素之间有空格。

例如：

<a class="prev page-numbers" href="../tutkimusjulkaisut/tyopapereita/?wpfb_list_page=2">&laquo; Edellinen</a> <a class='page-numbers' href='../tutkimusjulkaisut/tyopapereita/?wpfb_list_page=1'>1</a>

删除空格后，它们现在齐平： http://jsfiddle.net/yfp37mac/