Question

我正在努力获得<ul＆gt;包含以其父div为中心的分页链接。我不确定<ul>是解决这个问题的最佳方法，但我能想到在<div class="pagination">内水平显示链接的唯一方法（浮点数似乎不起作用。）

的HTML / PHP

<div class="pagination">    
        <ul>
            <li><?php previous_post_link('<span class="left-arrow"></span> older posts'); ?></li>
            <li><?php next_post_link('<span class="right-arrow"></span> newer posts'); ?></li>
        </ul>            
    </div><!-- end pagination -->

CSS

#blog .pagination {
    background: url('img/arrow_left.png') no-repeat;
    height: 169px;
    width: 635px;
    float: right;
    margin-right: 14px;
    padding-bottom: 20px;
}

#blog .pagination ul li {
    display: inline;
    margin: 0 auto;
    width: 290px;
}

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

#blog .pagination .right-arrow {
    padding-left: 50px;
    background: url('arrow_right.png') no-repeat;
}

live site

Answer 1

 .pagination {
    width: 500px;
    background:#eee;
    text-align:center;   
 }

 .pagination ul { 
    display:inline;
    margin: 0 auto;
 }

 .pagination ul li {
    display: inline;
    margin:5px;
 }

Answer 2

只是做

#blog .pagination ul{
width:100%;
display:block;
text-align:center;
}
#blog .pagination ul li{

display:inline-block;
width:auto;/* to clean you style*/
}

我已经检查了它，它可以在您的网站上运行

编辑：我忘记了箭头

#blog .pagination .left-arrow {
    background: url("arrow_left.png") no-repeat scroll right center transparent;
    float: left;
    padding: 10px 25px;
}
#blog .pagination .right-arrow {
    background: url("arrow_right.png") no-repeat scroll 0 0 transparent;
    float: right;
    padding: 10px 25px;
}

在div中居中ul

2 个答案: