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]

用戶名 - - - - - - - - - - -

我認為這是因為[BTN 3]位於[BTN 2]的頂部

那么如何獲得第一個布局？ 任何建議將不勝感激。

Answer 1

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

..從那里您可以輕松設置每個容器的所需對齊方式：)