文字縮進移動元素（錨標記）離開頁面

Question

我有一個列表，使用導航中的圖片沒有任何文字。看起來他們已經走到了背景之中，我很難解決它。我想成爲點擊圖像，並讓他們把我帶到另一個頁面。我對此很新。我使用CSS來做到這一點。

<div id="navigation"> 
    <ol> 
    <li class="news"><a href="news.html">news</a></li> 
    <li class="review"><a href="review.html">Review</a></li> 
    <li class="contact"><a href="contact.html">Contact</a></li> 
    <li class="photos"><a href="photos.html">Photos</a></li> 

    </ol> 
</div> 

，這裏是我的CSS：

#navigation li { 
float: left; 
height: 30px; 
margin: 0 0px 0 0; 
text-indent: -9999px;} 

#navigation li.news { 
background: url("news.png"); 
display:block; 
width: 308px; 
height: 80px; 
list-style:none;} 

#navigation li.review { 
background: url("review.png"); 
width: 308px; 
height: 80px; 
list-style:none;} 

#navigation li.contact 
{ 
background: url("contact.png"); 
width: 308px; 
height: 80px; 
list-style:none;} 

#navigation li.photos 
{ 
background: url("photo.png"); 
width: 308px; 
height: 80px; 
list-style:none;} 

任何幫助，將不勝感激。

Answer 1

text-indent移動的<a>標籤功能的頁面，因爲<a>是display: inline默認。在這種情況下，它被視爲有點像文本並被縮進。你可以這樣做，而不是：

#navigation li { 
float: left; 
height: 30px; 
margin: 0 0px 0 0; 
} 

#navigation a { 
    display: block; 
    text-indent: -9999px; 
    height: 100%; 
} 

雖然我不知道爲什麼你想要的文字那裏。

看看這個演示：http://jsbin.com/ejeGufa/2/edit

你可以告訴大家的<a>標籤現在在正確的地方，因爲光標變爲（或者你可以在開發者工具檢查元素）。

順便問一下，你能避免受這樣的重複代碼：

#navigation li { 
    list-style: none; 
    float: left; 
    margin: 0; 
    display:block; 
    width: 308px; 
    height: 80px; 
} 

#navigation a { 
    display: block; 
    text-indent: -9999px; 
    height: 100%; 
} 

#navigation li.news { 
    background: red; 
} 

#navigation li.review { 
    background: blue; 
} 

Answer 2

像這樣的東西應該工作。相應地調整。

#navigation a { 
    display: inline-block; //or block 
    width: 308px;  //adjust accordingly 
    height: 80px;  //adjust accordingly 
}