3

我正在开发一个移动应用程序，并且我有一个固定的页脚菜单。

<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; }

我在安卓设备上测试过。问题是，当我更改设备方向时，菜单 ul 的边距：自动在我单击另一个菜单项之前不起作用。谢谢！

我通过更改 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; }
4

1 回答 1

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 的“fixed-fixed”插件（这有助于移动固定定位，因为所有手机/平板电脑都不支持它）： https ://github.com/filamentgroup /固定-固定

最重要的是，我推荐他们为移动设备构建的整个工作流程： https ://github.com/filamentgroup/Southstreet/

于 2013-10-23T23:32:11.887 回答