css - WP 文件库中分页之间的空白

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

Aila，你的元素之间有空格。

例如:

<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/