中心的內容佈局W /側邊欄鏈接突出顯示，以瀏覽器邊緣

我有一個固定寬度的工作，居中，2列布局（側邊欄和內容），在側邊欄我的網站的主要導航。當用戶將鼠標懸停在導航中的特定鏈接上或正在查看該特定頁面時，我想要一個懸停/高亮顯示的階段，其中導航鏈接具有一直延伸到瀏覽器邊緣的背景顏色。中心的內容佈局W /側邊欄鏈接突出顯示，以瀏覽器邊緣

例如，我的佈局的側邊欄是200像素寬，在左邊。我的內容列寬度爲700px，位於側邊欄右側。我有一個「包裝」div，父母都將邊欄和內容div設置爲900px寬，並以「margin：0 auto」爲中心。如果用戶在導航欄中的某個鏈接上懸停，我希望鏈接具有背景顏色，不僅位於鏈接後面，而且還位於瀏覽器窗口的左邊緣，無論用戶擁有多寬瀏覽器窗口設置在。

佈局例子在這裏：http://i.imgur.com/QfY8b.gif

來源

2012-08-06 cqde

發現此修復：http://ronaldvwilliams.com/archives/432但禁用水平滾動條。如果可能，我想盡量避免使用此解決方案。 – cqde 2012-08-06 06:21:02

所以，做你想要只使用CSS的東西。基本上將每個li項目設置爲具有較大的寬度。然後將文本設置爲右對齊，使用文本對齊。設置填充（右側）以確保文本不接吻側面。最後，使用：hover選擇器分別點亮每個li（通過設置新的CSS代碼）。

注意#nav是UL列表的ID。請務必使導航菜單與此類似：

HTML

<ul id='nav'> 
    <li>Nav Link</li> 
    <li>Navy Link</li> 
    <li>Nav Links</li> 
</ul>

CSS

#nav{ 
    float:left; 
} 
#nav li{ 
    width:200px; 
    height:2em; 
    line-height:2em; 
    padding:0px 40px 0px 0px; 
    margin:5px 0px 5px 0px; 
    text-align:right; 
} 
#nav li:hover{ 
    background-color:#000; 
    color:#fff; 
}

編輯我忘了添加鏈接的造型。基本上繼承了li的造型/尺寸。

#nav a{ 
    width:inherit; 
    height:inherit; 
    margin:0px; 
    padding:0px; 
}

來源

2012-09-20 21:19:01 Steve

中心的內容佈局W /側邊欄鏈接突出顯示，以瀏覽器邊緣

回答

相關問題