填充从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 ul＆amp;删除填充将填充应用于#access。