左右撥動不顯示導航

Question

我試圖複製這個網站上顯示的左右撥動： http://www.alexanderinteractive.com/company/josh

我想申請在我的網站這個導航，但不能得到圖像現身。

這裏是我的代碼：

 #toggle { 
 
     position: absolute; 
 
     right: 30px; 
 
     top: 30px; 
 
     width: 104px; 
 
     z-index: 2; 
 
     } 
 
     #toggle a.prev { 
 
     background-image: url(http://www.onvia.com/sites/default/files/icon_arrow_left_150x150.png); 
 
     } 
 
     #toggle a.prev { 
 
     margin-right: 20px; 
 
     } 
 
     #toggle a.next { 
 
     background-image: url(http://www.onvia.com/sites/default/files/icon_arrow_right_150x150.png); 
 
     } 
 
     .clear:before, 
 
     .clear:after { 
 
     content: "\0020"; 
 
     display: block; 
 
     height: 0; 
 
     overflow: hidden; 
 
     }

<div id="toggle" class="clear"> 
 
    <a href="http://www.apple.com" class="prev">Previous</a> 
 
    <a href="http://www.microsoft.com" class="next">Next</a> 
 
</div>

Answer 1

所有你需要做的就是添加

#toggle a { 
text-indent: -9999px; 
background-size: cover; 
width: 35px; 
height: 35px; 
display: inline-block; 
} 

的text-indent刪除文本;父元素是position: absolute;，因此您需要爲元素設置height和width，並且background-size: cover;使背景圖像與包含元素允許的一樣大。 Here is the jsfiddle

Answer 2

你可以做這樣的。

#toggle { 
 
     position: absolute; 
 
     right: 30px; 
 
     top: 30px; 
 
     width: 104px; 
 
     z-index: 2; 
 
     } 
 
     #toggle a.prev { 
 
     display: inline-block; 
 
     width: 30px; 
 
     height: 30px; 
 
     background-size: contain; 
 
     background-image: url(http://www.onvia.com/sites/default/files/icon_arrow_left_150x150.png); 
 
     } 
 
     #toggle a.prev { 
 
     margin-right: 20px; 
 
     } 
 
     #toggle a.next { 
 
     display: inline-block; 
 
     width: 30px; 
 
     height: 30px; 
 
     background-size: contain; 
 
     background-image: url(http://www.onvia.com/sites/default/files/icon_arrow_right_150x150.png); 
 
     } 
 
     .clear:before, 
 
     .clear:after { 
 
     content: "\0020"; 
 
     display: block; 
 
     height: 0; 
 
     overflow: hidden; 
 
     }

<div id="toggle" class="clear"> 
 
    <a href="http://www.apple.com" class="prev"></a> 
 
    <a href="http://www.microsoft.com" class="next"></a> 
 
</div>