麻烦造型李和跨度 - 边缘/填充/定位 [英] trouble styling li and span - margin / padding / positioning

问题描述

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

live site

 < div class =pagination> 
< ul> 
< li><？php previous_post_link（'< span class =left-arrow>< / span>& nbsp; OLDER POSTS'）; ？>< /锂> 
< li><？php next_post_link（'NEWER POSTS& nbsp;& nbsp;& nbsp;& nbsp;< span class =right-arrow>< / span>' ）; ？>< /锂> 
< / ul> 
< / div><！ - 结束分页 - > 
 
 #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％; 
颜色：＃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; 
 
  

解决方案

更改这些

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

应该这样做

I have my theme's pagination links set in a div within a div. Ideally, the pagination link div should be centered both vertically and horizontally, and the li elements should align horizontally with the span elements. My problem is, none of those elements will budge regardless of what I do. I'm a little confused, and certain I'm overlooking something.. just not sure what it is.

live site

<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;
}

解决方案

change these

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

that should do it

这篇关于麻烦造型李和跨度 - 边缘/填充/定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！