0

我将主题的分页链接设置div在div. 理想情况下，分页链接div应该垂直和水平居中，并且li元素应该与元素水平对齐span。我的问题是，无论我做什么，这些元素都不会让步。我有点困惑，并且肯定我忽略了某些东西..只是不确定它是什么。

现场直播

<div class="pagination">    
        <ul>
            <li><?php previous_post_link('<span class="left-arrow"></span>&nbsp;OLDER POSTS'); ?></li>
            <li><?php next_post_link('NEWER POSTS&nbsp;&nbsp;&nbsp;&nbsp;<span class="right-arrow"></span>'); ?></li>
        </ul>            
    </div><!-- end pagination -->

#blog .pagination {
    background: url('img/dots_large.png') no-repeat;
    height: 169px;
    width: 635px;
    margin-right: 14px;
    padding-bottom: 20px;
    text-align:center;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 70%;
    color: #333333;
    line-height: 2;
}

#blog .pagination ul { 
    background: #fff;
    display:inline;
    padding: 15px;
}

#blog .pagination ul li {
    display: inline;
}

#blog .pagination .left-arrow {
    padding-right: 40px;
}

#blog .pagination .right-arrow {
    padding-left: 40px;
}

#blog .pagination span.left-arrow {
    background: url('img/arrow_left.png') no-repeat;
}

#blog .pagination span.right-arrow {
    background: url('img/arrow_right.png') no-repeat;
}
4

2 回答 2

1

改变这些

#blog .pagination ul { 
    background: #fff;
    display:inline-block;
    padding: 15px;
    margin-top: 60px;
}
#blog .pagination ul li {
    display: inline-block;
}

应该这样做

于 2013-06-05T22:59:55.747 回答
1

这是一种选择：

#blog .pagination ul {
    background: #FFF;
    display: table;
    border-spacing: 15px;
        margin: 0 auto;
}

#blog .pagination ul li {
    display: table-cell;
}

#blog .pagination span.right-arrow {
    background: url('img/arrow_right.png') no-repeat 0 50%;
}

#blog .pagination span.left-arrow {
    background: url('img/arrow_left.png') no-repeat 0 50%;
}

但是，如前所述，您必须在页面顶部包含一个文档类型。例如，将其添加到模板的最顶部：

<!DOCTYPE html>
于 2013-06-05T23:08:48.460 回答