css - 水平对齐元素，jquery mobile

Question

我对 jquery mobile 或相关的移动 UI 框架没有太多经验，我发现很难水平对齐元素。

我想水平对齐文本字段并选择标签。以便它们显示为内联。

我尝试了data-type="horizo​​ntal" 和data-inline="true"。但它们不起作用。

这是我使用的代码，

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

意见/建议？

Answer 1

汤姆的回答很有用。但这种力量完全按照需要工作

我使用以下方法获得所需的输出。

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

为此可以使用布局网格(引用 here)

但布局网格可能无法提供精确的结果，至少在我的情况下我没有获得所需的对齐方式。

Some good fiddles很有用。