Home/ Questions/Q 8164793
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T19:23:42+00:00

How do I lineup up form controls like select boxes and others in a

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Alternative Example using CSS and data-inline=”true” tag

    CSS

    #inline-select-container {
    overflow:auto;
}
#inline-select-left {
    float:left;
}

#inline-select-right {
     float:right;
}
​

    HTML

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

        <div id="inline-select-container">

            <div id="inline-select-left">    
                <select name="select-choice-0" id="select-choice-1" data-inline="true">
                   <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 id="inline-select-right">
                <select name="select-choice-2" id="select-choice-2" data-inline="true">
                   <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>  

        <br />
        <br />

        <div id="inline-select-container">

            <div id="inline-select-left">    
                <label for="select-choice-0" class="select">Shipping method:</label>
                <select name="select-choice-0" id="select-choice-1" data-inline="true">
                   <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 id="inline-select-right">
                <label for="select-choice-2" class="select">Shipping method:</label>
                <select name="select-choice-2" id="select-choice-2" data-inline="true">
                   <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>​
    • 0