JQuery Mobile – 显示内联的HTML表单

目标：在Jquery Mobile的同一行显示文本框和提交按钮。

问题：它们不会显示在同一行上。

我已经多次尝试在同一行显示文本框和提交按钮，但它永远不会有效。 这是我的代码和我用过的组合……

那没用。

这也没有。

我做错了什么，我怎样才能实现目标？

谢谢，圣诞快乐！

Answer 1

网格布局是否有效？

• http://jquerymobile.com/demos/1.0/docs/content/content-grids.html

HTML：

Answer 2

您可以使用媒体查询来显示内联文本输入的按钮以获得更大的屏幕宽度，并在提交按钮上显示文本框以获得更小的屏幕宽度：

 form .ui-input-text { display : inline-block; width : 65%; vertical-align : middle; } form > .ui-btn { display : inline-block; width : 25%; vertical-align : middle; } @media all and (max-width:480px) { form .ui-input-text { width : 100%; } form > .ui-btn { width : 100%; } } 

这是一个演示： http ： //jsfiddle.net/fmJGR/

我使用jQuery Mobile添加的类来定位元素，这对于使用提交按钮特别有用，因为它是jQuery Mobile初始化后的HTML结构，它不像每个初始化元素。

以下是jQuery Mobile初始化后提交按钮的HTML变为：

 
  Add     

如果你想支持IE7，你需要添加以下代码，因为IE7不理解display : inline-block ：

 form .ui-input-text { display : inline-block; width : 65%; vertical-align : middle; /*Fix for IE7*/ *display : inline; zoom : 1; } form > .ui-btn { display : inline-block; width : 25%; vertical-align : middle; /*Fix for IE7*/ *display : inline; zoom : 1; } 

Answer 3

将它们添加到一行HTML表中的两个单独的列中也可以。