2

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

意见/建议？

4

4 回答 4

4

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

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

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

可以为此使用布局网格（请参阅此处）

但是布局网格可能无法给出精确的结果，至少在我的情况下我没有得到所需的对齐。

一些好的小提琴很有用。

于 2012-04-15T20:37:03.400 回答
1

看看文本输入和文本区域。

它本身不支持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 将多个输入彼此相邻...

于 2012-04-10T18:29:37.557 回答
1 
<div href="#" data-role="button" style="margin:30px;">Adjust</div>

如果你想操纵左右调整使用style="margin-left=30px;margin-right=30px;"

于 2013-02-27T06:47:12.030 回答
1

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

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

我已成功使用类似于以下代码的内容来“内联”文本输入并使用 jqm 选择框。如果您希望样式不同 - 您可以在单个 ui-block 元素之后添加主题色板字母，使其看起来像 ui-block-b 或 ui-block-c 等。这一切都记录在这里：http ://demos.jquerymobile.com/1.0rc1/docs/content/content-grids.html

  <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 -->
于 2017-05-09T13:10:06.347 回答