jQuery Mobile 导航栏不均匀划分 space

Question

我有一个包含三个 link 的导航栏，如下所示：

jQuery 脚本引用：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

jQuery-手机HTML:

    <div data-role="page" id="mobiles">
        <div data-role="header" data-theme="e">
            <h1>Seashore Mobiles by Ron Tornambe</h1>
            <a href="https://twitter.com/share" class="twitter-share-button" target="_blank" data-count="true" data-url="' + this.href + '"></a>
            <div class="fb-like" data-share="true" data-width="128" data-show-faces="false" style="margin-left:8px;"></div>
            <div data-role="header" >
                <div data-role="navbar">
                  <ul>
                        <li><a href="#mobiles" data-mini="false" class="ui-btn-active ui-state-persist" data-icon="info">Mobiles</a></li>
                        <li><a href="#contact" data-icon="info">Contact</a></li>
                        <li><a href="#about" data-icon="info">About</a></li>
                  </ul>
                </div>
            </div>
        </div>
...
    </div>

但不是将 space 平均分配给三个 link 按钮，这些按钮大约有一英寸宽，如 on this website 所示。

我已经盯着这段代码看了好几个小时了，一定会欣赏更多的眼睛。

Answer 1

在页面的样式部分中，您有以下条目：

   div a {
       position: relative;
       float: left;
   }

float: left 是导致问题的原因，因为它应用于导航栏按钮。

jQuery Mobile 导航栏不均匀划分 space

jOuery Mobile navbar does not divide the space evenly

jquery

jquery-mobile