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

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; }
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 に答える