Question

我有一个带有三个链接的导航栏，如下所示：

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-mobile 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>

但是，不是在三个链接按钮之间均匀划分空间，按钮大约有一英寸宽，如on this website所示。

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

Answer 1

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

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

float：left导致问题，因为它应用于导航栏按钮。

jQuery Mobile导航栏不会均匀划分空间

1 个答案: