Question

我对jquery移动或相关的移动UI框架有很多经验，我发现很难横向对齐元素。

我想水平对齐文本字段并选择标记。这样它们就像是内联的。

我尝试了 data-type =“horizontal” 和 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

汤姆的回答很有用。但是那个dint完全按照需要工作

我用以下来获得所需的输出。

   <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很有用。

Answer 2

看看Text inputs & Textareas。

它本身不支持data-inline，但您可以使用data-role=fieldcontain代替：

<div data-role="fieldcontain">
    <label for="name">Text Input:</label>
    <input type="text" name="name" id="name" value=""  />
</div>

据我所知，你不能只使用jQuery Moblie将多个输入放在一起......

Answer 3

<div href="#" data-role="button" style="margin:30px;">Adjust</div>

如果您想使用style="margin-left=30px;margin-right=30px;"
进行左右调整

Answer 4

...我自己还在学习jQuery Mobile框架，所以我知道当你需要完成某项工作时会很痛苦，但你真的应该尝试使用框架中已经构建的内容，特别是如果你将打造移动友好的应用程序。帮自己一个忙，花时间学习它。

另外，另一个提示;您需要远离使用px值来调整元素大小，因为这通常无法在移动设备上很好地扩展，因此em值最适合跨平台使用。

我已成功使用类似于以下代码的内容来“内联”文本输入并选择带有jqm的框。如果您希望样式不同 - 您可以在单个ui-block元素之后添加主题样本字母，使其看起来像ui-block-b或ui-block-c等。这些都记录在这里：{ {3}}

  <div class="ui-grid-a">
    <div class="ui-block">
      <label for="cs[ps_1]" class="fieldLabel ui-hidden-accessible">option 1: </label>
      <select name="cs[ps_1]" id="cs[ps_1]" data-mini="true">
        <option>options</option>
      </select>
    </div>
    <div class="ui-block">
      <input type="text" style="width:10em;" id="cs[pn_1]" name="cs[pn_1]" />
    </div>
  </div><!-- /grid-a -->

水平对齐元素，jquery mobile

4 个答案: