理想情况下,两者一起使用100％的宽度并且只是并排.
我一直试图玩ui-grid-a和类似的选项,但一切都失败了.你可以看到一些尝试there.它们都同样难看,但最复杂的是将两个元素并排放置一个具有固定宽度(按钮)和一个应该占用其余宽度的元素(因此固定也不是百分比).
你知道如何正确渲染这个吗？
在梦想世界中,jQuery会有一些内置函数来对这些控件进行分组(就像< fieldset data-role =“controlgroup”data-type =“horizontal”data-role =“fieldcontain”>用于分组复选框.但是它似乎并非如此.
非常感谢你的帮助,
狂
解决方法
在该页面中,他们通过使用简单的< table>来并排比较事物.布局激发了我对它的依赖.虽然表格不是进行布局/设计的首选资源,但它非常有效,简单,并且避开了我在这里看到的解决方法的许多麻烦.以下是我的方法可以为您的jsfiddle you linked做的.请参阅第四次迭代.
换句话说,由于jQuery Mobile如何构建页面的复杂性,添加了不在标记中的div和样式等,这可能是这个特定场景的最佳选择：
>想要两列项目,其中第二列是固定宽度.
>第一列扩展以填充调整大小时屏幕的宽度.
>您希望元素包含设备的整个宽度.
(值得注意的是,如果你想调整这些特定方面中的任何一个,一些简单的CSS填充或对齐应该从这个基础解决方案开始)
<table style='width:100%'><tr>
<td>
<input type='text' (or type='search') />
</td>
<td style='font-size:80%; width:7em'>
<input type='submit' value='Submit' />
</td>
</tr></table>
显然,如果你想将它们发布到某个地方或在javascript中操作它们,你应该为这些项目命名并给出一个id.希望这证明对于那些没有被< table> s性质推迟的人有所帮助.使用jQuery Mobile的简单界面/主题,我无法看到这种方法的缺点.
最后,您可能想停下来问问自己是否需要提交按钮.在移动设备(例如移动设备)中,只要表格输入元素与其交互,键盘上就会出现标有“Go”的按钮.其操作与返回键相同,可以提交搜索词.我目前还没有在其他浏览器上审查此选项.
