2013-06-03 28 views
0

我還在學習php,所以我不完全確定如何解決.. 我需要在php數組中有一個圖像和一些文本顯示。目前,我正在使用跨度,但無法正常工作 - 只有一個跨度顯示我在樣式表中建立的圖像。包括在php數組中的跨度?

我想知道是否有更好的方法來實現這個目標,或者我錯過了一個錯誤?

live site

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

哪裏陣列? –

+0

該代碼是好的檢查源如果arrow_right具有良好的擴展名,並且它在與arrow_left相同的文件夾中。 – Robert

+0

@Robert右箭頭與左側位於同一文件夾中,並將其文件名稱複製/粘貼到樣式表中。 – AMC

回答

0

我認爲這個問題是您#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 --> 

現在箭頭出現了嗎?

+0

只有左箭頭出現,但出現'...'。 – AMC

0
#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

+0

沒有明顯的變化;右箭頭仍然不起作用。 – AMC

0

你在#blog上的問題是與右箭頭圖像。您輸入的圖像來源不正確。

如果更正圖像源,則會顯示右箭頭圖像。

+0

右箭頭與左側位於同一文件夾中,並將其文件名稱複製/粘貼到樣式表中。 – AMC

+0

但是在您的實時網站上,當我看到使用檢查元素的代碼時,背景圖片的網址無效。目前的網址是[link](http://blog.christaan​​divy.com/wp-content/themes/theme/arrow_right.png/),這是不正確的,正確的網址是[link](http://blog.christaan​​divy .com/wp-content/themes/theme/img/arrow_right.png),還要注意你需要從最後刪除斜槓。 –

0

糾正:

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