Question

我还在学习php，所以我不完全确定如何解决.. 我需要在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 -->

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

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

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

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

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


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

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

Answer 1

我认为问题是你的#blog .pagination将left_arrow.png显示为背景图片。 #blog .pagination .left-arrow span和.right-arrow span没有显示，因为末尾的额外跨度意味着你需要另一个跨越该类名称的跨度。

→在顶部试试：

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

箭头现在出现了吗？

Answer 2

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

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

此代码会尝试将背景图片放在<span>的{{1}}内，class="right-arrow"与<span class="right-arrow">不同。

我不确定为什么其中一个人在工作。如果您为此类命名，则可能效果更好：#blog .pagination span.left-arrow或span.left-arrow

Answer 3

#blog上的问题是右箭头图像。您输入的图像来源不正确。

如果您更正了图像源，则会显示右箭头图像。

Answer 4

正确的：

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

包括php数组中的span？

4 个答案: