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/

WP-filebase中的分页之间的空白区域

1 个答案: