CSS3導航鏈接背景

Question

我想要一個活動狀態來顯示用戶他們在哪個頁面上。我創建了一個名爲「nav-active」的div類，並將錨標籤如下所示。

<li><div class="nav-active"><a href="index.html">Blog</a></div></li> 

我這樣做，以便我可以根據導航鏈接有多少個字符來使背景動態變大。

.nav-active { 
background: #ff4b33; /* Old browsers */ 
background: -moz-linear-gradient(top, #ff4b33 0%, #ca2913 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff4b33), color-stop(100%,#ca2913)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #ff4b33 0%,#ca2913 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #ff4b33 0%,#ca2913 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, #ff4b33 0%,#ca2913 100%); /* IE10+ */ 
background: linear-gradient(top, #ff4b33 0%,#ca2913 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff4b33', endColorstr='#ca2913',GradientType=0); /* IE6-9 */ 

height:70px; 
margin-top: -30px; 
padding: 0 15px; 

因爲填充，這取決於我在鏈接上移動的頁面。

我相信有這樣做的更好方法，問題是如何？

任何幫助將不勝感激。

Answer 1

直接應用背景的鏈接樣式，像這樣：

<li><a class="nav-active" href="index.html">Blog</a></li> 

爲了防止您的鏈接從取決於你是什麼網頁上，風格爲您的所有環節和定位改變大小隻背景爲.navactive：

#nav li { 
    position: float; 
} 

#nav li a { 
    display: block; 
    padding: 0 15px; 
    ... 
} 
#nav li a.nav-active { 
    -webkit-linear-gradient(top, #ff4b33 0%,#ca2913 100%); 
    ... 
}