Одна строка метки / поле ввода с использованием jquery mobile CSS

Question

Я пытаюсь отобразить список меток и входов с помощью JQuery Mobile, чтобы результаты выглядели примерно как настройки на iPhone, например, метка была выровнена по левому краю, а ввод выровнен по правому краю в той же строке. Единственный способ, которым мне удалось это сделать, - это использовать таблицы, что я считаю плохой практикой?

Каким был бы равняющий CSS без таблиц?

   <ul data-role="listview" data-dividertheme="e">
                <li data-role="list-divider">Seamless List (margin-less)</li>
                <li>
                    <table style="width:100% ">
                        <tr>
                            <td style="width: 50%">
                                Foo1
                            </td>
                            <td style="width: 50%">

                                <input type="number" value="20000" style="text-align: right" 
                                id="Foo1Input" />

                            </td>
                        </tr>
                    </table>
                </li>

Answer 1

Я знаю, что этот пост старый, но для людей в будущем взгляните на их сетки http://jquerymobile.com/test/docs/content/content-grids.html

Answer 2

<div data-role="fieldcontain">
    <label for="customField">Hello</label>
    <input type="text" name="customField" id="customField" value=""  />
</div> 

использовать fieldcontain

Answer 3

Вы можете попробовать что-то вроде этого: http://jsfiddle.net/7Layw/1/.

HTML

<div id="listWrapper">
    <div class="leftItem">
        Foo1
    </div>
    <div class="rightItem">
        <input type="number" value="20000" style="text-align: right" 
        id="Foo1Input" />
    </div>
    <div class="leftItem">
        Foo2
    </div>
    <div class="rightItem">
        <input type="number" value="20000" style="text-align: right" 
        id="Foo1Input" />
    </div>
</div>

CSS

.leftItem {
    clear: both;
    float: left;
    width: 50%;
}

.rightItem {
    float: left;
    width: 50%
}

С этим методом все, что вам нужно сделать, это обернуть каждый элемент слева в div с классом leftItem и каждый элемент справа с классом rightItem.

Надеюсь, это поможет!