填充從div中丟失

Question

我創建了一個適用於移動設備的網站，但當頁面以低分辨率顯示時（例如在手機上）時遇到小問題。

http://designated.net.au/testbed/djdais/

正如你可以看到它看起來在全屏幕罰款，但在低分辨率它看起來像這樣：

有填充從菜單的底部缺失爲5px ，儘管我已經在CSS中定義了它。

這裏是我的代碼：

/* =Menu 
-------------------------------------------------------------- */ 

#access { 
background: #333; /* Show a solid color for older browsers */ 
clear: both; 
display: block; 
float: left; 
margin: 0 auto 6px; 
min-width: 300px; 
max-width: 880px; 
min-height: 50px; 
border: solid; 
border-width: 10px; 
border-color: #666; 
padding: 0; 
text-transform: uppercase; 
} 
#access ul { 
font-size: 14px; 
line-height: 30px; 
list-style: none; 
margin: 0; 
padding: 5px; 
} 
#access li { 
float: left; 
position: relative; 
margin: 5px 5px 5px 5px; 
width: 135px; 
height: 30px; 
text-align: center; 
background: #666; 
} 

Answer 1

放一個浮在你的#access UL

試試這個：

#access ul { 
font-size: 14px; 
line-height: 30px; 
list-style: none; 
margin: 0; 
padding: 5px; 
float: left; 
} 

Answer 2

嘗試從接入ul {}移除填充並將其應用到代替access div

Answer 3

#access { 
background: #333; /* Show a solid color for older browsers */ 
clear: both; 
display: block; 
float: left; 
margin: 0 auto 6px; 
min-width: 300px; 
max-width: 880px; 
min-height: 50px; 
border: solid; 
border-width: 10px; 
border-color: #666; 
padding: 5px; 
text-transform: uppercase; 
} 

#access ul { 
font-size: 14px; 
line-height: 30px; 
list-style: none; 
margin: 0; 
} 

試試這個。從#access刪除填充&將填充應用到#access。