水平对齐元素，jquery移动

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

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

我试图数据类型= “水平”和数据列直插= “真”。但他们不工作。

下面是我使用的代码，

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

的意见/建议？

来源

2012-04-10 hitesh israni

汤姆的回答很有用。但该功能完全按照需要工作

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

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

来源

2012-04-15 20:37:03

看看Text inputs & Textareas。

它不支持data-inline自身，但您可以使用data-role=fieldcontain代替：只使用jQuery的手机类

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

至于我可以看到你不能把多个输入彼此相邻..

来源

2012-04-10 18:29:37

可以使用布局网格也可以使用表格。我用表格解决了我的问题。如果你想要，你可以更新你的答案。thnx – 2012-04-12 06:17:05

@mashit：布局网格可能是一种可能性，但表格是错误的，因为它们在语义上用于数据。你也可以使用风格的div来解决这个问题。 – 2012-04-12 09:38:11

可以举例说明风格的div？ – 2012-04-12 10:39:13

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

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

来源

2013-02-27 06:47:12 Nirus

...我仍然在学习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-09 13:10:06 Obewan

水平对齐元素，jquery移动

回答

相关问题