jOuery移动导航栏不分割空间均匀

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

浮动：左边是因为它是适用于导航栏按钮导致了问题。