流體div中的CSS導航問題

我正在嘗試在每個列表項上方創建一個帶有圖像的導航，而不是每個項目的單個圖像。當我全屏時，看起來很好，但是當我最小化期望列表項目很好地堆疊在一起的屏幕時。下面是我的代碼清單：流體div中的CSS導航問題

#nav ul, #nav li { 
list-style: none; 
font-size: 1.2em; 
text-transform:uppercase; 
} 

#nav ul li { 
display: inline; 
list-style-image: none; 
list-style-position: outside; 
list-style-type: none; 
background: url(images/navico.jpg) no-repeat center; 
padding-top: 50px; 
padding-right: 4px; 
padding-bottom: 0px; 
padding-left: 6px; 
}

這是頁面http://ecoairofswfl.com/Bush2/

來源

2013-09-25 user2815786

將#nav ul li改爲display：inline-block;解決了部分問題。從左到右的排列依然在各處。 – EWit

你的意思是堆棧很好嗎？期望的行爲是什麼（除了列表項不重疊）。 – Don

試試這個鏈接，

#nav ul li { 
    background: url("images/navico.jpg") no-repeat scroll center center transparent; 
    display: block; 
    float: left; 
    list-style: none outside none; 
    padding: 50px 4px 0 6px; 
}

我改變了他們阻止元素，並將它們向左浮動;內聯不能像堆疊一樣按預期工作。

來源

2013-09-25 14:55:57

Solution is 
#nav ul li { 
    display: inline-block; 
    list-style-image: none; 
    list-style-position: outside; 
    list-style-type: none; 
    background: url(images/navico.jpg) no-repeat center; 
    padding-top: 50px; 
    padding-right: 4px; 
    padding-bottom: 0px; 
    padding-left: 6px; 
    }

來源

2013-09-25 14:58:07 Sudharsun

流體div中的CSS導航問題

回答

相關問題