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

浮動：左邊是因爲它是適用於導航欄按鈕導致了問題。