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

..从那里您可以轻松设置每个容器的所需对齐方式：)