PhoneGap + jQuery Mobile в Android: как настроить заголовок с помощью HTML5

Question

Я делаю проект с использованием PhoneGap + jQuery Mobile в Android.Я пытаюсь сделать заголовок следующим образом:

[BTN 1] -------- ИМЯ ПРИЛОЖЕНИЯ ------- [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] -------- ИМЯ ПРИЛОЖЕНИЯ ------- [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] -------- ИМЯ ПРИЛОЖЕНИЯ ------- [BTN 3]

ИМЯ ПОЛЬЗОВАТЕЛЯ---------------------

Я думаю, это потому, что [BTN 3] находится сверху [BTN 2]

Так как я могу получить первый макет?Любое предложение будет оценено.

Answer 1

попробуйте использовать ui-grid (aka Grids): DEMO: http://jquerymobile.com/demos/1.0a3/#docs/content/content-grids.html

.. оттуда вы можете легко установить желаемое выравнивание каждого контейнера:)