php - 包括 php 数组中的跨度？

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 跨度和 .right-arrow 跨度未显示，因为末尾的额外跨度意味着您需要在跨度内使用该类名的另一个跨度..

→在顶部试试这个：

<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 的问题在于右箭头图像。您输入的图片来源不正确。

如果您更正图像源，将显示右箭头图像。

Answer 3

正确的：

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

Answer 4

 #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>放在一个块中class="right-arrow"，它与. 不同<span class="right-arrow">。

我不确定为什么其中一个正在工作。如果你这样命名你的类，它可能会更好：#blog .pagination span.left-arrow或者只是span.left-arrow