水平对齐元素,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>
的意见/建议?
汤姆的回答很有用。但该功能完全按照需要工作
我使用以下来获取所需的输出。
<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)
但布局网格可能无法给出精确的结果,至少在我的情况我没有得到所需要的对齐。
它不支持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>
至于我可以看到你不能把多个输入彼此相邻..
<div href="#" data-role="button" style="margin:30px;">Adjust</div>
,如果你想操作只左右的调整使用
style="margin-left=30px;margin-right=30px;"
...我仍然在学习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 -->
可以使用布局网格也可以使用表格。我用表格解决了我的问题。如果你想要,你可以更新你的答案。thnx – 2012-04-12 06:17:05
@mashit:布局网格可能是一种可能性,但表格是错误的,因为它们在语义上用于数据。你也可以使用风格的div来解决这个问题。 – 2012-04-12 09:38:11
可以举例说明风格的div? – 2012-04-12 10:39:13