我正在开发移动应用程序,并且我有一个固定的页脚菜单。
<div id='footer'>
<ul class='menu'>
<li>menu1</li>
<li>menu2</li>
</ul>
</div>
#footer { height:99px; background:url(../images/black2.png)repeat-x; border-top: 1px solid black; position:fixed;bottom:0;width:100%;}
.menu { max-width:640px; margin:auto; }
我在Android设备上测试过它。问题是,当我更改设备方向时,菜单ul的余量:auto在我点击另一个菜单项之前不起作用。 谢谢!
我通过更改CSS解决了这个问题。
#footer { height:99px; background:url(../images/black2.png)repeat-x; border-top: 1px solid black; position:fixed;bottom:0;width:100%; text-align:center;}
.menu {width:100%; max-width:640px; display:inline-block; }
答案 0 :(得分:1)
我会做这样的事情:
<强> HTML 强>
<div class="footer">
<ul>
<li>menu1</li>
<li>menu2</li>
</ul>
</div>
<强> CSS 强>
.footer { background: black; position: fixed; bottom: 0; width: 100%; text-align: center; }
.footer ul { color: white; width: 90%; margin: 0 auto; display: block; list-style: none; }
.footer ul li { padding: .25em; display: block; }
最重要的是,我会告诉你检查Filament Group的“固定固定”插件(这有助于移动固定定位,因为所有手机/平板电脑都不支持它):
https://github.com/filamentgroup/fixed-fixed
最重要的是,我建议他们构建移动设备的整个工作流程: https://github.com/filamentgroup/Southstreet/