水平对齐元素，jquery mobile答案

【问题标题】：Align Elements horizontally, jquery mobile水平对齐元素，jquery mobile
【发布时间】：2017-05-09 21:10:06
【问题描述】：

我对 jquery mobile 或相关的移动 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>

意见/建议？

【问题讨论】：

标签： css jquery-mobile

【解决方案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 很有用。

【讨论】：

【解决方案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 将多个输入彼此相邻...

【讨论】：

可以使用布局网格，表格也很有用。我使用表格解决了我的问题。如果你愿意，你可以更新你的答案。谢谢
@mashit：布局网格可能是一种可能性，但表格是错误的，因为它们在语义上是用于数据的。你也可以使用样式化的 div 来解决这个问题。
可以举一些样式div的例子吗？
仅供其他用户参考：fieldcontain 自 1.4.0 版起已弃用 (api.jquerymobile.com/fieldcontain)

【解决方案3】：

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

如果你想控制左右调整，请使用style="margin-left=30px;margin-right=30px;"

【讨论】：

【解决方案4】：

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

另外，还有一个提示；您需要避免使用 px 值来调整元素的大小，因为这通常不能在移动设备上很好地缩放，em 值最适合跨平台使用。

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

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

【讨论】：