Android中的PhoneGap + jQuery Mobile：如何使用HTML5調整標題

Question

我正在做一個在Android中使用PhoneGap + jQuery Mobile的項目。我試圖做這樣的標題：

[BTN 1] -------- APP NAME ------- [BTN 2]

用戶名----- ---------------- [BTN 3]

我試着下面的代碼，但只能得到這樣的：

<div data-role="header" data-position="fixed"> 
     <a href="#" data-icon="gear">Edit</a> 
     <h1>APP NAME</h1> 
     <a href="#" data-icon="plus">Children</a> 
     <div> 
      USERNAME 
      <a href="add.html?" data-rel="dialog" data-transition="slidedown" data-role="button" data-icon="plus">Measurement</a> 
     </div><!-- /navbar --> 
    </div> 

[BTN 1] ---- ---- APP NAME ------- [BTN 2]

用戶名[BTN 3]

然後我試圖以下：

<div data-role="header" data-position="fixed"> 
    <a href="#" data-icon="gear">Edit</a> 
    <h1>APP NAME</h1> 
    <a href="#" data-icon="plus">Children</a> 
    <div> 
     USERNAME 
     <a href="add.html?" data-rel="dialog" data-transition="slidedown" data-role="button" data-icon="plus" class="ui-btn-right">Measurement</a> 
    </div><!-- /navbar --> 
</div> 

然後，它成爲：

[BTN 1] -------- APP NAME ------- [BTN 3]

USER NAME ---------------------

我認爲這是因爲[BTN 3]是上的[BTN 2]

頂端

那麼我怎樣才能得到第一個佈局？任何建議將不勝感激。

Answer 1

嘗試使用UI網（又名電網）： DEMO：http://jquerymobile.com/demos/1.0a3/#docs/content/content-grids.html

..from那裏，您可以輕鬆地設置每個容器:)