html form-inline,JQuery Mobile - Display An HTML Form Inline

You can use a media query to show the button inline with the text input for larger screen widths and show the text-box over the submit button for smaller screen widths:

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

}

}

I am using the classes added by jQuery Mobile to target the elements, this is especially useful for working with the submit button since it's HTML structure after jQuery Mobile initializes it does not resemble the per-initialized element.

Here is what the submit button's HTML turns into after jQuery Mobile initializes it:

Add

If you wish to support IE7 you will need to add the following code because IE7 doesn't understand 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;

}