css - JQuery Mobile 中的导航栏按钮大小

Question

我正在尝试在 JQuery Mobile 中为将在 iOS 中运行的应用程序创建一个导航栏。我的代码如下所示。当我运行该应用程序时，会出现三个选项。但是，它们都向左侧收缩。我想要这三个选项来填充页脚中的可用空间。我究竟做错了什么？我只是使用 jquery 移动页面中引用的字形图标。感谢您的帮助!

<style type="text/css">
  .navbar .ui-btn .ui-btn-inner { padding-top: 40px !important; }
  .navbar .ui-btn .ui-icon { width: 30px!important; height: 30px!important; margin-left: -15px !important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: 0 !important; border-radius: 0 !important; }                

  #navButton1 .ui-icon { background: url(/navbar/option1.png) 50% 50% no-repeat; background-size: 24px 22px; }
  #navButton2 .ui-icon { background: url(/navbar/option2.png) 50% 50% no-repeat; background-size: 24px 22px; }      
  #navButton3 .ui-icon { background: url(/navbar/option3.png) 50% 50% no-repeat; background-size: 24px 22px; }          
</style>

...

<div id="myPage" data-role="page">
  <div data-role="header" data-position="fixed">
    <h1>My App</h1>
  </div>

  <div data-role="content">
    <!-- My Content -->
  </div>

  <div data-role="footer" data-position="fixed" class="navbar">
    <div id="myNavbar" data-role="navbar" class="navbar" data-grid="d">
      <ul>
        <li><a href="#" id="navButton1" data-icon="custom" class="ui-btn-active ui-state-persist">Option 1</a></li>
        <li><a href="option2.html" id="navButton2" data-icon="custom" rel="external" data-transition="none">Option 2</a></li>
        <li><a href="option3.html" id="navButton3" data-icon="custom" rel="external" data-transition="none">Option 3</a></li>
      </ul>
    </div>
  </div>
</div>

Answer 1

尝试从您的 div 元素中删除 data-grid="d"。