jquery mobile lineup controls in a line

Question

How do I lineup up form controls like select boxes and others in a line in jquery vs having them displayed vertically?

<label for="select-choice-0" class="select">Shipping method:</label>
<select name="select-choice-0" id="select-choice-1">
   <option value="standard">Standard: 7 day</option>
   <option value="rush">Rush: 3 days</option>
   <option value="express">Express: next day</option>
   <option value="overnight">Overnight</option>
</select>
<label for="select-choice-2" class="select">Shipping method:</label>
<select name="select-choice-2" id="select-choice-2">
   <option value="standard">Standard: 7 day</option>
   <option value="rush">Rush: 3 days</option>
   <option value="express">Express: next day</option>
   <option value="overnight">Overnight</option>
</select>

I don't want them in the same fieldset with data-type="horizontal". Thanks

Answer 1

Would a grid layout work for you? Here is a Example:

• http://jsfiddle.net/RM5eq/

HTML

<div data-role="page" class="type-home">
    <div data-role="content">

        <div class="ui-grid-a">
            <div class="ui-block-a">
                <select name="select-choice-0" id="select-choice-1">
                   <option>Shipping method</option>
                   <option value="standard">Standard: 7 day</option>
                   <option value="rush">Rush: 3 days</option>
                   <option value="express">Express: next day</option>
                   <option value="overnight">Overnight</option>
                </select>
            </div>
            <div class="ui-block-b">
                <select name="select-choice-2" id="select-choice-2">
                   <option>Shipping method</option>
                   <option value="standard">Standard: 7 day</option>
                   <option value="rush">Rush: 3 days</option>
                   <option value="express">Express: next day</option>
                   <option value="overnight">Overnight</option>
                </select>
            </div>       
        </div>

    </div>
</div>​

Docs for the Grid Layout options

• http://jquerymobile.com/demos/1.1.0/docs/content/content-grids.html

Answer 2

I have liked jquery-mobile-960.

jquery-mobile-960 is a port of 960 grid to jquery mobile. It merge the flexibility of 960.gs, and the ease of jquery mobile. It aims to bring more flexibility to jquery-mobile layout and thus make it easier to use on tablets.