我正在开发一个移动应用程序,我有一个固定的页脚菜单。
<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 的 margin: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; }
最佳答案
我会做这样的事情:
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 的“fixed-fixed”插件(这有助于移动固定定位,因为所有手机/平板电脑都不支持它):
https://github.com/filamentgroup/fixed-fixed
最重要的是,我会推荐他们为移动设备构建的整个工作流程: https://github.com/filamentgroup/Southstreet/
关于android - Phonegap应用位置固定菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17316214/