我创建了一个适合移动设备的网站,但是当页面以较低分辨率(例如在移动设备上)显示时,我遇到了一个小问题。
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;
}
最佳答案
在您的#access ul上放一个浮动
尝试这个:
#access ul {
font-size: 14px;
line-height: 30px;
list-style: none;
margin: 0;
padding: 5px;
float: left;
}
关于css - div中缺少填充,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/17716538/