One line label/input field using jquery mobile CSS

Question

I'm trying to display a list of labels and inputs using JQuery Mobile so that the results look something like the settings on the iPhone, e.g label is left aligned, and input is right aligned on the same row. The only way I've managed to do this is by using tables, which I believe is bad practice?

What would be the equaling CSS without the tables?

   <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>

Solution 1

You could try something like this: 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%
}

With this method all you would have to do is wrap each item on the left in a div with the class leftItem and every item on the right with a class of rightItem.

I hope that helps!

Solution 2

I know this post is old but for people in the future take a look at their grids http://jquerymobile.com/test/docs/content/content-grids.html

Solution 3

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

use fieldcontain