Question

I havent much experience on jquery mobile or related mobile UI frameworks, I am finding it difficult to align elements horizontally.

I want to horizontally align text field and select tag. so that they appear inline.

I tried data-type=”horizontal” and data-inline=”true”. but they are not working.

Here’s the code i am using,

<div data-role="controlgroup" data-type="horizontal">
      <label for="cs" class="fieldLabel">option 1: </label>
      <select name="cs[param_string_1]" id="cs[param_string_1]" data-inline="true">
          <option>options</option>
      </select>
      <input type="text" data-inline="true" style="width:100px" id="cs[param_num_1]" name="cs[param_num_1]"  />  
</div>  

Comments/Suggestions?

Answer 1

Tom’s answer was useful. but that dint work exactly as per the need

I used following to get the required output.

   <div data-role="controlgroup" data-type="horizontal">
       <table>
         <tr>
           <td width="30%">
             <select name="cs_abc" class="fieldLabel" style="width: 100%" data-inline="true"  id="cs[abc]">
               <option>...</option>         
             </select>  
             </td>
             <td width="70%">
               <input type="text" id="cs_xyz"  style="width:160px" data-theme="d"  name="cs[xyz]" />
             </td>
           </tr>
         </table>
    </div>        

One can use layout grids for this (Refer here)

But layout grids may not give precise results, at least in my case i was not getting the needed alignment.

Some good fiddles were useful.