jquery-mobile - JQuery Mobile - 在输入文本区域旁边放置一个输入按钮

Question

我想得到一个 input文本区域和 submit按钮附在它的右侧。
理想情况下，两者将使用 100% 的宽度并且并排放置。

我一直在尝试玩弄ui-grid-a和类似的选择，但一切都失败了。你可以看到一些尝试 there .它们都同样丑陋，但最复杂的事情是将两个元素并排放置，一个具有固定宽度(按钮)，另一个应该占用其余的宽度(因此既不是固定的也不是百分比)。

你知道如何正确渲染它吗？

在梦幻世界中，jQuery 会有一些内置函数来对这些控件进行分组(就像 <fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain"> 用于分组复选框。但似乎并非如此。

非常感谢你的帮助，

疯狂的

Answer 1

隐藏在 jQuery Mobile 中 own documentation我找到了一种对我的 效果很好的方法搜索框 + 搜索按钮 执行。

在该页面中，他们使用简单的 <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>

显然，您应该 name并给出 id如果您想将它们张贴在某处或在 javascript 中操作它们，请添加到这些项目中。希望这对没有被 <table> 的性质拖延的其他人有所帮助s。我一直无法看到使用 jQuery Mobile 的简单界面/主题的这种方法的缺点。

最后，您可能想停下来问问自己是否需要提交按钮。在移动设备(例如 mobile safari)中，每当与表单输入元素进行交互时，键盘上都会有一个标记为“Go”的按钮。这与返回键的操作相同，可以提交搜索词。目前我还没有在其他浏览器上审查过这个选项。

(这不是与您移动搜索框图标的方法相媲美的解决方案。这非常聪明，但似乎不是您最初的问题。)